LoginSignup
1

More than 5 years have passed since last update.

v-forでdataを取得する時にはv-bind:key設定も必須

Posted at

v-for で data を取得している箇所では v-bind:key を指定していないと、npm run build を実行した時に「Custom elements in iteration require 'v-bind:key' directives」というエラーが発生します。

ローカルでの動作確認を npm run serve で実施していた段階では、ブラウザ上には正しく表示できてしまっていたので気づきませんでしたが、実際にはエラーも発生していました。

調べてみると、以前は任意だったものが、Vue.js 2.2.0以降では必須になったようです。

以下の例は、MyCardというコンポーネントをv-forで複数個表示しようとしているサンプルコードの断片です。

  • 誤っていたコード
<v-flex v-for="item in items" xs12 sm6 md4>
  <MyCard v-bind:title="item.title" v-bind:content="item.content"/>
</v-flex>
  • 正しいコード
<v-flex v-for="item in items" v-bind:key="item.id" xs12 sm6 md4>
  <MyCard v-bind:title="item.title" v-bind:content="item.content"/>
</v-flex>

なお、上記コードと同じ.vueファイル内に以下のデータが入れてあり、それを取得しています。
(サンプルプロジェクトのため、データを外部ファイルにしていません)

<script>
import MyCard from './components/MyCard.vue'

export default {
  name: 'App',
  components: {
    MyCard
  },
  data () {
    return {
      items: [
      { title: 'タイトル1', content: 'コンテンツのサンプル1' },
      { title: 'タイトル2', content: 'コンテンツのサンプル2' },
      { title: 'タイトル3', content: 'コンテンツのサンプル3' },
      { title: 'タイトル4', content: 'コンテンツのサンプル4' },
      { title: 'タイトル5', content: 'コンテンツのサンプル5' },
      { title: 'タイトル6', content: 'コンテンツのサンプル6' }
    ]
    }
  }
}
</script>

参考になったサイト

https://qiita.com/FumioNonaka/items/d1d9c9335116426a8316
https://jp.vuejs.org/v2/guide/list.html#key
https://github.com/vuejs/vetur/issues/261

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1