kz’s blog

興味のあることについて書いていきます。

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

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

修正前コード

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

エラー内容

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

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

修正後コード

datas が配列の時

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

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

datas がオブジェクトの時

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

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

ループ内のテキストフィールドがうまく動作しない時の対処

問題のソースコード

HTML

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

JavaScript

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

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

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

修正後ソースコード

HTML

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

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

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