Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vueとエディター上にエラーが出る

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となった、

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事