Javascript Vue：为什么这个简单的v-for不起作用：迭代中的元素希望有“v-bind:key”指令Vue/require-v-for-key错误

我有一个简单的组件，其中有一个人的值，它应该显示：

TestFor.vue：

然而，我在迭代中得到的元素期望有“v-bind:key”指令vue/require-v-for-key错误。这不应该发生，因为根据文档：我的语法是有效的：

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

编辑：

正如人们所说，require-v-for-key规则是罪魁祸首。这条规则背后有什么原因吗？或者干脆禁用它可以吗

---

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

您需要定义列表中每个元素的键。在您的情况下，这是非常琐碎的：

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

---

没有密钥，Vue无法将数据链接到使用v-for创建的组件。缺少键意味着对迭代对象的任何修改都将破坏并重新创建所有子组件，这将带来许多不希望的副作用。定义密钥后，当集合更改时，vue将计算每个元素的密钥，将其与现有子元素的密钥进行比较，并采取相应措施。

您需要为列表中的每个元素定义密钥。在您的情况下，这是非常琐碎的：

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

---

没有密钥，Vue无法将数据链接到使用v-for创建的组件。缺少键意味着对迭代对象的任何修改都将破坏并重新创建所有子组件，这将带来许多不希望的副作用。定义密钥后，当集合更改时，vue将计算每个元素的密钥，将其与现有子元素的密钥进行比较，并相应地执行操作。

错误来自您的linter规则：

您可以通过添加密钥绑定来修复它：

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

---

错误来自您的林特规则：

您可以通过添加密钥绑定来修复它：

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

---

该错误意味着您需要在div处绑定key属性

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

---

该错误意味着您需要在div处绑定key属性

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

---

---

首先，视频教程使用数据，而不是像这样的道具you@kerbH0lz为什么它会对v-for产生影响？另一个问题，你真的需要这个。人而不仅仅是人吗？@Ifaruki可能不需要，但在我试图摆脱错误的过程中，我想避免的是，并不是缺少这个导致了它。视频教程使用了数据，而不是像这样的道具you@kerbH0lz为什么它对v-for有影响？另一个问题，你真的需要这个人而不仅仅是人吗？@Ifaruki可能不需要，但是，在我试图摆脱错误的过程中，我想回避的是，并不是因为缺乏这一点才导致了错误。为什么错误会发生，如果根据文件记录，它不应该发生？请看我的答案。您配置了一个过梁来抛出错误。如果根据文档，错误不应该发生，为什么会发生？请参阅我的答案。您配置了一个linter来抛出错误。@kerbh0lz-我对此不确定-这个异常是由linter抛出的，它的存在有很好的理由。您是否有支持此功能的链接？不要将常量字符串传递给绑定：key='key'，传递键本身：：key=keyYeah，不，可能是错误的，我只是玩了一下，使用道具不起作用，而使用数据时没有：key。我删除了我的评论，对不起@ZedHome:key='key'不是：key='key'though@ZedHome-裤子着火了：。它从来就不在那里P@kerbh0lz-我对此不确定-这个异常是linter抛出的，它的存在有很好的理由。您是否有支持此功能的链接？不要将常量字符串传递给绑定：key='key'，传递键本身：：key=keyYeah，不，可能是错误的，我只是玩了一下，使用道具不起作用，而使用数据时没有：key。我删除了我的评论，对不起@ZedHome:key='key'不是：key='key'though@ZedHome-裤子着火了：。它从来就不在那里这条规则最初是怎么制定的？它有什么好处？您包含的链接没有解释它…文档中提到了：这些简单的示例在没有键的情况下运行良好，但也使用了linter使其成为一种习惯，因此稍后您将不会遇到难以调试的错误。感谢您的链接！最初为什么要制定这条规则？它有什么好处？您包含的链接没有解释它…文档中提到了：这些简单的示例在没有键的情况下运行良好，但也使用了linter使其成为一种习惯，因此稍后您将不会遇到难以调试的错误。感谢您的链接！