Quick Start | Vue.js

<template>
  <div>
    <p>Hi, my name is {{ user }}</p>

    <label for="username">Username:</label>
    <input v-model="user" id="username" name="username" />
  </div>
</template>

<script>
  export default {
    data: () => ({
      user: 'Alice',
    }),
  }
</script>

import { render, fireEvent } from '@testing-library/vue'
import Component from './Component.vue'

test('properly handles v-model', async () => {
  const { getByLabelText, getByText } = render(Component)

  // Asserts initial state.
  getByText('Hi, my name is Alice')

  // Get the input DOM node by querying the associated label.
  const usernameInput = getByLabelText(/username/i)

  // Updates the <input> value and triggers an `input` event.
  // fireEvent.input() would make the test fail.
  await fireEvent.update(usernameInput, 'Bob')

  getByText('Hi, my name is Bob')
})

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue', 'prettier'],

  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': 'error'
    // "vue/name-property-casing": ["error", "kebab-case"]
  }
}

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

const requiredProps = ['title', 'name', 'etc'];

validator: function (heroObj) {
  // check to see if all the required props are passed in the object
  return requiredProps.every(requiredValue => (
    Object.entries(heroObj).some(([key, val]) => {
      // double check to make sure the value isn't 'undefined'
      return (requiredValue === key) && val;
    })
  ));
},

<template>
  <div class="selectedCard">
    <div class="allPaymentsDelete"
      v-for="payment in this.debtorPayments" :key="payment.id">
    <a class="deletePaymentX" @click="deletePaymentFormat(payment.id)">X</a>
      {{ formatDateMDY(payment.paymentdate.split("T")[0]) }}
      {{ payment.assignedto }}
      {{ payment.paymentstatus }}
    </div>
  </div>
</template>
          
<script>
  methods: {
    deletePaymentFormat(pid) {
      let url = `${this.baseURL}deletepaymentbypid`;
      let params = {
        pid: pid,
        host: this.serverDBase,
        user: this.userDBase,
        password: this.passDBase,
        schema: this.schemaDBase,
      };
      this.deletePaymentByPid(url, params);
    },
    
    deletePaymentByPid(url, params) {
      axios
        .post(url, params)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
      });
    },
  }
</script>

<style>
.deletePaymentX {
  color: red;
  font-weight: bold;
  text-decoration: none;
}
</style>

<template>
  <table>
  	<tr>
  		<th>Checkbox</th>
      	<th>File</th>
      	<th>Name</th>
      </tr>
      <tr v-for="(row, i) in accountsToAssign" :key="row[i]">
        <td><v-checkbox @change="checkBoxes(row.id)" /></td>
		<td>{{ row.filenumber }}</td>
		<td>{{ row.name }}</td>
      </tr>
	</table>
</template>
<script>

export default {

data() {
  return {
	selectedAccounts: [],
	}
}
  
methods: {
  
  checkBoxes(value) {
      console.log(value);
      if (this.selectedAccounts.includes(value)) {
        console.log("remove " + value);
        this.selectedAccounts = this.selectedAccounts.filter((item) => {
          return item !== value;
        });
      } else {
        console.log("add " + value);
        this.selectedAccounts.push(value);
      }
      console.log(this.selectedAccounts);
    },
      
  }
}
</script>

    isNumber(evt) {
      evt = evt ? evt : window.event;
      let charCode = evt.which ? evt.which : evt.keyCode;
      if (
        charCode > 31 &&
        (charCode < 48 || charCode > 57) &&
        charCode !== 46
      ) {
        evt.preventDefault();
      } else {
        return true;
      }
    },

<form enctype='multipart/form-data'>
      <h1>
        Upload files
      </h1>
      <input type='file' name='photo' @change="filesChange($event.target.name, $event.target.files)">
</form>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data () {
    return {
      serverLink: 'http://localhost:3000/upload/'
    }
  },
  methods: {
    filesChange (filename, files) {
      if (!files.length) {
        return
      }

      console.log(filename, files)
      const formData = new FormData()
      for (let i = 0; i < files.length; i++) {
        formData.append(filename, files[i], files[i].name)
      }

      axios.post(this.serverLink, formData).then(
        rsp => {
          console.log(rsp)
        }
      ).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

const { scrollTop, offsetHeight } = document.documentElement;
const { innerHeight } = window;
const bottomOfWindow = Math.round(scrollTop) + innerHeight === offsetHeight;

if (bottomOfWindow) {
  console.log('Bottom of window');
}

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState()(store)
}

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

import VueI18n from 'vue-i18n'  // 引入 Vue I18n
import zh from './i18n/zh'      // 存放中文語系檔
import en from './i18n/en'      // 存放英文語系檔

Vue.use(VueI18n)

// 預設使用的語系
let locale = 'en';

// 檢查 localStorage 是否已有保存使用者選用的語系資訊
if (localStorage.getItem('footmark-lang')) {
  locale = localStorage.getItem('footmark-lang');
  store.commit('setLang', locale);
} else {
  store.commit('setLang', locale);
}

const i18n = new VueI18n({
  locale: locale,
  messages: {
    'zh': zh,
    'en': en
  }
});

Vue.config.productionTip = false;

new Vue({
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

<template>
  <div>
    <!-- 切換語系 UI -->
    <label
      v-for="(item, index) in optionsLang"
      v-bind:key="index"
    >
      <input type="radio" v-model="$store.state.lang" :value="item.value" v-on:change="setLang(item.value)"> {{ item.text }}
    </label>

    <!-- 使用 $t(key) 即可依所選用的語系顯示對應的語言 -->
    <h1>{{ $t('title')}}</h1>
    <h2>{{ $t('description')}}</h2>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      optionsLang: [
        { text: '中文', value: 'zh' },
        { text: 'English', value: 'en' }
      ]
    }
  },
  methods: {
    // 儲存切換的語系
    setLang (value) {
      this.$store.commit('setLang', value);
      this.$i18n.locale = value;
      localStorage.setItem('footmark-lang', value);
    }
  }
}
</script>

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    lang: null  // 存放使用者選用的語系
  },
  mutations: {
    // 切換語系設定
    setLang (state, value) {
      state.lang = value;
    }
  },
  actions: {},
  modules: {}
});