Vue.js の v-for でエラーが出た時の対処

ループ時のキー未設定によるエラーの対処

<div v-for="data in datas"></div>

Elements in iteration expect to have 'v-bind:key' directives.

どうやらループ時の一意になるキーを設定しなければならないようなので以下のように修正する。

<div v-for="(data, index) in datas" :key="index">
  {{ index }}: {{ data }}
</div>

配列の添字を指定することで必ず一意になる。

<div v-for="(value, key) in datas" :key="key">
  {{ key }}: {{ value }}
</div>

オブジェクトのキーを指定することで必ず一意になる。

<span v-for="object in objects" :key="object.id">
  <input v-model="object.id" />
</span>

objects: [{ id: 1 }, { id: 2 }, { id: 3 }]

上記の状態でテキストフィールドに文字を入力すると１文字打つ毎にフォーカスが外れてしまいます。

そこで下記のように修正したら解消しました。

<span v-for="(object, index) in objects" :key="index">
  <input v-model="object.id" />
</span>

v-for で一意を判別する値がまずかったっぽいですね。

まぁ、object.id を設定した場合、テキストフィールドにバインドしてあるので衝突が起こる可能性があるので当然と言えば当然ですね笑