是否使用文档中显示的不带v-bind:key的v_for

Question

vue文档https://v2.vuejs.org/v2/guide/list.html说我能做到：

<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>

但当我这样做的时候，我会得到：

Module Error (from ./node_modules/eslint-loader/index.js):
7:5  error  Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key

我可以通过说来解决问题

<div v-for="(value, name) in object" v-bind:key="name">

文件有错吗？我错过了什么？

air:v0 crb$ vue --version
@vue/cli 4.5.6

命令是"npm run serve"，它运行"vue cli service serve">

整个文件：

<template>
<div class="foo">
<h1>foo Component</h1>
<!--
<div v-for="(value, name) in object" v-bind:key="name">
--> 
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
object: { 'a': 1, 'b': 2 }
}
}
}
</script>

Answer 1

正如您所看到的，ESLint为您提供了规则vue/require-v-for-key的名称，因此您可以禁用它。

在./eslintrc.js文件中，添加以下规则并将其设置为warn或off:

{  
...
rules: {
'vue/require-v-for-key': 'warn',
}
}

• warn-只会向您显示警告，而不会抛出错误。这比off更可取，因为警告会提醒您在发布应用程序之前解决这些问题。

• off-将完全禁用该特定规则，并且不会对此发出警告，因此您可能会忘记在任何位置设置:key属性，这可能会导致性能下降，因为Vue使用密钥进行优化。

如果你想将所有规则切换为警告，你也可以安装eslint插件-仅警告插件：

{  
...
plugins: [
'only-warn'
],
rules: {
'vue/require-v-for-key': 'warn',
}
}