循环遍历 Vue 中的组件 - 迭代中的自定义元素需要 'v-bind:key' 指令

Question

我正在尝试创建多个自定义组件(只是作为概念证明，所以只是复制同一个组件 5 次没有什么花哨的(，但我收到以下错误：

迭代中的自定义元素需要"v-bind：key"指令。

这是循环的代码(我很确定问题出在哪里：

<template>
<div>
<app-server-status v-for="server in 5"></app-server-status>
</div>
</template>
<script>
import ServerStatus from './ServerStatus'
export default {
components: {
'app-server-status': ServerStatus
}
}
</script>

现在从我所做的阅读中，我可以看到由于在更高版本的 Vue 中使用组件的限制，我在某处需要一个密钥 - 只是不太确定正确的方法。有人可以建议我如何修改该特定示例以仅显示组件 5 次吗？

旁注：下面的代码给了我在应用程序中需要的结果，但 VSCode 仍然给我一个错误(预期的"v-bind：key"指令使用由"v-for"指令定义的变量(。

<app-server-status v-for="server in 5" :key="index"></app-server-status>

Answer 1

我已经通过将：key属性添加到元素来修复相同的错误。

<app-server-status v-for="server in 5" :key="server"></app-server-status>

它对我来说工作正常。复制的同一组件显示 5 次。希望对您有所帮助。

我从 https://github.com/vuejs/vetur/issues/858 那里得到了这个解决方案

Answer 2

可以是 ：

<app-server-status v-for="(server, index) in 5" v-bind:key="index"></app-server-status>

更新：

根据 Vue 文档：

建议在任何时候提供带有v-for的key属性 可能，除非迭代的 DOM 内容很简单，或者你是 有意依赖默认行为来提高性能。

由于它是 Vue 识别节点的通用机制，因此key还有其他用途 与v-for没有特别联系 ，因为我们 稍后将在指南中看到。

不要将对象和数组等非基元值用作 v-for 键。请改用字符串或数值。

有关key属性的详细用法，请参阅keyAPI 文档。

Answer 3

好的，所以在对代码进行一些修改后，我发现以下代码有效并且不会引发错误：

<template>
<div>
<app-server-status v-for="server in 5" v-bind:key="server"></app-server-status>
</div>
</template>
<script>
import ServerStatus from './ServerStatus'
export default {
components: {
'app-server-status': ServerStatus
}
}
</script>

Answer 4

当然，使用 v-for "推荐"键绑定，但在某些情况下我不需要/想要它。在 vue.config 中添加此子句.js让我的生活再次平静：

module.exports = {
// this may not be a good option for beginners
// as it will disable linting.
lintOnSave: false
}