NEW ARTICLE
kotlin 「if」文を使用する
  1. HOME
  2. Vue.js
  3. Nuxt.js error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-keyが発生時の対処法

Nuxt.js error Elements in iteration expect to have ‘v-bind:key’ directives vue/require-v-for-keyが発生時の対処法

Nuxt.js error Elements in iteration expect to have ‘v-bind:key’ directives vue/require-v-for-keyが発生時の対処法

Nuxt.js(Vue.jsのフレームワーク)を v-forディレクティブを利用時にエラーが発生したので対処手順を記載。

目次

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

エラー内容

key属性の設定が必要みたいです。

Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key

対処法

エラーメッセージ通りkey属性を指定する

変更前

<li v-for="list in lists">

変更後

<li v-for="list in lists" :key="list.id">