Vue.jsの “[Vue warn]: Avoid using non-primitive value as key, use string/number value instead” の回避方法

Vue.js v2でv-for指令を用いて反復処理を実行すると,以下の警告が表示された。

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead

警告の回避方法を調べていると,「javascript – [Vue warn]: Avoid using non-primitive value as key, use string/number value instead – Stack Overflow」が見つかり,解決したので情報を記す。

問題となるのは以下のようなコードだ。

       <div v-for="comment in comments" :key="comment"></div.

comments変数にオブジェクトが入っており,commentの反復変数にもオブジェクトが入る場合,:keyにオブジェクトを指定するなという警告が出る。

:keyを使わないなら,:keyの指定を省略すればいいと思うかもしれない。しかし,:keyを指定しないと,以下の別の警告が発生する。

Element in iteration expect to have v-bind:key directives

警告を全て回避するには,以下のように使わなくても添字を:keyに指定してやればいい。

<div v-for="(comment, idx) in comments" :key="idx">
  <!-- ... -->
</div>

v-for指令でこのように添字が入るというのはよく知らなかった。次回以降,v-forで同じ警告が表示されたら,この方法で即座に対応したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です