web-dev-qa-db-ja.com

エラーの取得「反復の要素には、index.vueに「v-bind：key」ディレクティブvue / require-v-for-keyが必要です」

私はvue.jsを初めて使用します。 contentfulに接続してcontentfulからのエントリを表示しようとする単純なindex.vueがあります。 index.vueのコードは次のようになります。

<template>
  <div>
    <!-- render data of the person -->
    <h1>{{ person.fields.name }}</h1>
    <!-- render blog posts -->
    <ul>
      <li v-for="post in posts">
        {{ post.fields.title }}
      </li>
    </ul>
  </div>
</template>

<script>
  import {createClient} from '~/plugins/contentful.js'

  const client = createClient()

ただし、ブラウザからlocalhost：3000を試してみると、次のエラーが返されます。

./pages/index.vueモジュールエラーのエラー（./node_modules/eslint-loader/index.jsから）：

C：\ Users\admin\pdress\pages\index.vue 7：7エラー反復の要素には、「v-bind：key」ディレクティブvue/require-v-for-keyが必要です。

✖1つの問題（1つのエラー、0の警告）

誰かがvue.jsでの私の学習をさらに進めるために私を助けてくれれば幸いです。前もって感謝します

vue.jscontentful
3
user2368975

@ljubadrが提案したことは正しいです。これを行う必要があります：

<li v-for="post in posts" v-bind:key="post.id">

<!-- OR USE SHORTCUT NOTATION -->
<li v-for="post in posts" :key="post.id">

その理由はパフォーマンスに関係しています。属性keyは、リスト内の一意のアイテムを決定するのに役立ちますVue並べ替えの例を検討してください。UIに投稿用の並べ替えボタンがある場合、post配列内のアイテムの順序は変わります。つまり、Vueはリスト全体を再レンダリングしますか？もちろんそうではありません！:keyを使用すると、アイテムがすでにUIでレンダリングされているかどうかを判断できます。DOMノードをシャッフルし、高価なレンダリングサイクルを節約します。

次に、v-forを使用しているときにリスト内に複雑なコンポーネントがあり:keyが提供されていない場合、リストが変更または並べ替えられると、DOMが変更されるだけで、破棄されません。既存のコンポーネントであり、ローカル状態の不一致を引き起こす可能性があります。そのため、:key属性が必要です。

詳細については、Vue.jsのドキュメントをお読みください 。

注：v-forに:keyindexを使用することは、コレクション全体で一意ではないため、お勧めできません。

6
Harshal Patil
<template>
  <div>
    <!-- render data of the person -->
    <h1>{{ person.fields.name }}</h1>
    <!-- render blog posts -->
    <ul>
      <li v-for="post in posts" :key = "post">
        {{ post.fields.title }}
      </li>
    </ul>
  </div>
</template>


If this is not going to work use any unique field from your object for example if you have id in your object then,
:key = "post.id"
0
aniket gore

：key属性を定義する必要があります

v-for ディレクティブ。そして <transition-group> タグの場合。

この場合、v-for明示的に設定する必要があります。

  <li v-for="(post, i) in posts" :key="i + 10">
    {{ post.fields.title }}
  </li>

v-forで最大2つの引数を定義できることに気付いた場合は、アイテム（投稿）を定義する必要があり、投稿のインデックスを定義できます。

0
Yoarthur