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

Question

Сегодня начал разбирать Vue.js. Имею проблему. Хочу вывести все элементы из массива, но получаю ошибку: Elements in iteration expect to have 'v-bind: key" directives vue / require-v-for-key.В чем моя ошибка?

<template>
<div>
   <div class="post" v-for="post in posts">
     <div>Name {{post.name}}</div>
     <div>Description {{post.title}}</div>
   </div>
</div>
</template>

<script>
name: 'App',
components: { },
data() {
return {
  posts: [
    {id: 1, title: "JavaScript", name: "Dmytrii"},
    {id: 2, title: "C++", name: "Olexandr"},
    {id: 3, title: "PhP", name: "Boghdan"}
  ]
 }
},
methods : {

}
}
</script>

<style>
</style>

Answer 1

Вы имеете дело не с ошибкой, а предупреждением о том, что вам следует использовать v-bind:key с директивой v-for, что описано в Style Guide keyed v-for - vue2, Style Guide keyed v-for - vue3. Это необходимо для более предсказуемого поведения vue.

Этому правилу в Style Guide присвоена метка A:

Эти правила помогают предотвратить ошибки, поэтому учитывайте их и соблюдайте их любой ценой. Могут существовать исключения, но они должны быть очень редкими и делаться только теми, кто обладает экспертными знаниями как JavaScript, так и Vue. https://vuejs.org/v2/style-guide/#Priority-A-Essential

Если используете eslint-plugin-vue - ознакомьтесь с информацией Require v-bind:key with v-for directives - правило vue/require-v-for-key.

В ваш код достаточно добавить v-bind:key к директиве v-for:

new Vue({
  el: '#app',
  data: () => {
    return {
      posts: [{
          id: 1,
          title: "JavaScript",
          name: "Dmytrii"
        },
        {
          id: 2,
          title: "C++",
          name: "Olexandr"
        },
        {
          id: 3,
          title: "PhP",
          name: "Boghdan"
        }
      ]
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="post in posts" :key="post.id" class="post">
    <div>Name {{post.name}}</div>
    <div>Description {{post.title}}</div>
  </div>
</div>

БЛОГ НА HUSL

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

Ответы (1 шт):