vue cliを使用してプロジェクトを作成していると、このようなエラーに遭遇するかもしれません。
Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key
対処法は意外にも簡単でした。
vue.jsの公式ドキュメントにも解決策が載っています。
たとえばv-forを使って、monkeyの名前をliタグの中に出したいとしましょう。
例
<template>
<ul>
<li v-for="monkey in monkeys">{{ monkey }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
monkeys: ['Taro', 'Hanako', 'Jiro']
}
}
}
</script>
こう書くとエラーが発生してしまいアウトプットされません。
ところが以下のようにv-bind:key="monkey"をliタグのなかに追加するとエラーが消えます
解決!
<template>
<ul>
<li v-for="(monkey, dog) in monkeys" v-bind:key="dog">{{ monkey }}</li>
</ul>
</template>
どうやらv-forを使うときは、v-bind:key=""を付け加えてあげる必要があるそうです。これはvue.jsの公式ドキュメントでも推奨されています。
v-bind:key=""の中身は、inの手前にくるもの（この場合は(monkey, dog)）とそろえる必要があります。ただし、最初のオブジェクトとかぶるのはNGのようで、他とかぶらない名前を(monkey, dog このようにしてオブジェクトのあとにカンマで区切って付け加えるといいようです。ここではdogという名前をつけました。括弧にくくらないと、またエラーが出てしまいます。たとえば以下のようでは効きません。
誤り
<template>
<ul>
<li v-for="monkey,dog in monkeys" v-bind:key="dog">{{ monkey }}</li>
</ul>
</template>
//以下も効きません。
<template>
<ul>
<li v-for="monkey in monkeys" v-bind:key="dog">{{ monkey }}</li>
</ul>
</template>
👆ご注意ください。
このようにして解決することができました！
とはいえ初心者なので、もし何かあればご指摘ください