Vue.jsで、v-forディレクティブの:keyの意味

2019年05月28日

Vue.jsで、Vueオブジェクトのデータをループさせるときに、v-forディレクティブを使用します。

<li :v-for=”変数 in Vueオブジェクトのデータ名”>{{ 変数.データ名 }}</li>

上記のような感じで使いますが、いろいろなサイトでコードのサンプルを見ていて、上記のような書き方だけのときもあれば

<li :v-for=”変数 in Vueオブジェクトのデータ名” :key=”変数.id”>{{ 変数.データ名 }}</li>

のように、:keyがついている場合とついていない場合があります。

何のために :key がついているのか調べてみたのですが、Vueの機能でDOMを書き換えた時に、keyを指定していないと、順番が変わってしまうことがあるそうで、つけておくことで並び順を保持できるそうです。