
Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue
vueファイルをVSコード(Visual Stuio Code)で編集していてこのエラーが出たら。
:key=〇〇
が抜けていると思われる。
//Hoge.vue編集前
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
(中略)
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
↓optinの開始タグ内に:key="option.value"
を追加
//Hoge.vue編集前
<option v-for="option in options" v-bind:value="option.value" :key="option.value">
{{ option.text }}
</option>
(中略)
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
これで解決する。
御託
キーにあたる部分ははユニークな値である必要がある。
例えばデータベースから取得するなら、「テーブル名単数形.id」みたいなかんじ。
今回の例は同じvueファイル内に定義したオブジェクトに存在するキーを指定する必要があったからoption.value
となった、