Vue.js（2.xx）で困ったことをまとめる

Selectタグのデフォルト値セット

selectタグで地味に困ったことがあった。
デフォルト値を設定するときに、リストのObjectから一つをデフォルト値にする場合、
v-modelでバインドしたオブジェクトに値を設定してあげないとダメ。
また、その際には、リストを回してoptionのvalueになる値を設定することが肝心なポイント。

<select v-model:"content.localStore">
  <option v-for="store in relationStores" :value="store.store_id" :key="store.store_id">{{ store.store_name }}
</select>

module.exports = {
  data() {
    return (
      content: {
        ...,
	localStore: '',
	...
      },
      relationStores: [],
      ...
    )
  },
  methods: {
    async getRelationStores(){
      const result = await axios.post('example/getRelationStores', {
        params: {
	  user_code: userCode
	}
      })
      if(result.data){
        // ここでselectタグで使われるoption作成用のリストをセットする。
        this.content.relationStores = result.data
	// ここでlocalStoreに値設定してあげないとデフォルトで値が設定されない！
	// optionのvalueに該当する項目をセット！
	this.content.localStore = result.data[0].store_id 
      }
    }
  
  }

}