javascript - 视觉 : why this simple v-for doesn't work: Elements in iteration expect to have 'v-bind:key' directives 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://v2.vuejs.org/v2/guide/list.html我的语法是有效的:

This video tutorial也使用这种语法，对他们来说效果很好。为什么它对我不起作用？

编辑:

正如人们所说，require-v-for-key 规则是罪魁祸首。该规则背后是否有任何原因，或者是否可以禁用它？

我已将 "vue/require-v-for-key": "off" 添加到 package.json 中，原始代码现在似乎可以正常工作了。我好还是应该启用该规则？这似乎是无缘无故的烦恼。

Answer 1

您需要为列表的每个元素定义键。在您的情况下，这很微不足道:

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

没有 key ，Vue 无法将数据链接到使用 v-for 创建的组件。缺少键意味着对迭代对象的任何修改都会破坏并重新创建所有子组件，这会带来许多不良副作用。一旦定义了键，当集合发生变化时，vue 将为每个元素计算键，将其与现有子元素的键进行比较并采取相应的行动。