Nuxt.js(Vue.js)の「v-for」でコンポーネントをループさせる方法

Nuxt.js(Vue.js)で、コンポーネントでv-forを使う方法です。

こう↓ではなくて、

<a v-for="item in items" :href="item.url">
{{item.name}}
</a>

こう↓いうケース。

<nuxt-link v-for="item in items" :to="item.url">
{{item.name}}
</nuxt-link>

正解はkey属性を指定する、だそうです。

<nuxt-link v-for="( item, name, index ) in items" :key="item.index" :to="item.url">
{{item.name}}
</nuxt-link>

keyはループ内で一意である必要があるようで、上記「item」が都合よく「id」のような要素を持っていない場合は、「items」の3番目の引数を利用します。

<nuxt-link v-for="( item, name, index ) in items" :key="item.index" :to="item.url">
{{item.name}}
</nuxt-link>

2番目の引数には連想配列(オブジェクト？)のプロパティ名、3番目の引数にはループ番号が入るのでこれが利用できます。