web-dev-qa-db-fra.com

Obtenir une erreur "Les éléments de l'itération s'attendent à avoir" V-Bind: Key "Directives VUE / EXCEPTION-V-FOR-KEY" dans Index.Vue

Je suis nouveau à vue.js. J'ai un simple index.vue qui tente de se connecter au contenu et d'afficher les entrées de contenu. Mon code dans Index.vue ressemble à ceci:

<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()

Cependant, lorsque j'essaye localhost: 3000 de mon navigateur ... il revient avec l'erreur suivante:

Erreur dans ./pages/index.vue Erreur de module (à partir de ./node_modules/eslint-loader/index.js):

C:\utilisateurs\admin\pdress\pages\index.vue 7: 7 Éléments d'erreur dans itération Attendez-vous à avoir 'V-BIND: KEY' DIRECTIVES VUE/REQUÊT-V-FOR-KEY

✖ 1 problème (1 erreur, 0 avertissements)

J'apprécie si quelqu'un peut m'aider à continuer de continuer avec mon apprentissage sur Vue.js s'il vous plaît. Merci d'avance

vue.jscontentful
8
user2368975

Ce que @ljubadr a suggéré est juste. Vous devez faire cela:

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

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

La raison a à voir avec la performance. Attribut key aide Vue Déterminez des éléments uniques dans une liste. Considérez l'exemple de tri. Si votre utilisateur a un bouton de tri pour les messages, alors votre commande des articles dans post tableau changera. Mais cela signifie-t-il Vue va renoncer à une liste complète? Bien sûr que non! en utilisant :key Il peut déterminer si l'article était déjà rendu sur l'interface utilisateur. Il mélange simplement les nœuds DOM et enregistre des cycles de rendu coûteux.

Deuxièmement, si vous avez des composants complexes dans votre liste lorsque vous utilisez v-for et :key n'est pas fourni, alors chaque fois que la liste est modifiée ou ré-ordonnée, elle modifie simplement le DOM mais ne détruit pas les composants existants et qui peut entraîner une inadéquation locale. C'est pourquoi il doit avoir :key attribut.

Lire la documentation Vue.JS pour plus d'informations.

Remarque: N'oubliez pas d'utiliser v-forindex pour :key est une mauvaise idée car il n'est pas unique sur votre collection.

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"
1
aniket gore

Vous devez définir un : clé Atribute pour

v-for directive. Et pour <transition-group> tag.

pour ce cas v-for vous devez définir explicite,

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

Si vous avez remarqué, vous pouvez définir deux arguments maximum dans le v-for Vous devez définir l'élément (poste) et définir l'index du poste.

1
Yoarthur