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で同じ警告が表示されたら，この方法で即座に対応したい。