Vue: почему этот простой v-for не работает: элементы в итерации ожидают наличия директив 'v-bind: key' vue / require-v-for-key error

Question

У меня есть этот простой компонент с person со значениями, которые он должен отображать:

TestFor. vue:

<template>
    <div v-for = "(value, key) in this.person">
        {{key}} : {{value}}
    </div>

</template>


<script scoped>
    export default {
        props: {
            person: {
                firstName: 'Bob',
                lastNmae: 'Andersen',
                age: 27
            }
        }
    }
</script>

Однако я получить ошибку Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key. Этого не должно происходить, потому что согласно документации: https://vuejs.org/v2/guide/list.html мой синтаксис действителен:

Это видеоурок также использует этот синтаксис, и он отлично подходит для них. Почему это не работает для меня?

РЕДАКТИРОВАТЬ :

Как говорят, правило require-v-for-key является виновником. Есть ли какая-то причина за этим правилом или можно просто отключить его?

Я добавил "vue/require-v-for-key": "off" к package.json, и исходный код, похоже, теперь работает. Я в порядке или мне нужно снова включить это правило? Просто это кажется раздражением без причины.

Answer 1

Ошибка возникает из-за вашего правила линтера: require-v-for-key

Вы можете исправить это, добавив привязку ключа:

<div v-for = "(value, key) in this.person" :key="key">
   {{key}} : {{value}}
</div>

Answer 2

Вам необходимо определить ключ для каждого элемента вашего списка. в вашем случае это довольно тривиально:

<div v-for = "(value, key) in this.person" :key='key'>
  {{key}} : {{value}}
</div>

Без ключа Vue не может связать данные с компонентами, созданными с помощью v-for. Отсутствие ключа означает, что любая модификация объекта, который вы итерировали, уничтожит и воссоздаст все дочерние компоненты, что вызовет ряд нежелательных побочных эффектов. После определения ключа при изменении коллекции vue будет вычислять ключ для каждого элемента, сравнивать его с ключами существующих дочерних элементов и действовать соответствующим образом.

Answer 3

Ошибка означает, что вам нужно привязать ключевое свойство к вашему div.

<template>
    <div v-for = "(value, key) in person" :key="key">
        {{key}} : {{value}}
    </div>

</template>


<script scoped>
    export default {
        props: {
            person : {
               type : Object,
               default : function(){

                   return {
                      firstName: 'Bob',
                      lastNmae: 'Andersen',
                      age: 27
                   }
                }
               }
            }
        }
    }
</script>