Vue.js 通过Vue中的组件循环-迭代中的自定义元素需要'；v-bind:key'；指令

我正在尝试创建多个自定义组件（只是作为概念证明，所以没有什么比将同一个组件复制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>

从“/ServerStatus”导入服务器状态
导出默认值{
组成部分：{
“应用程序服务器状态”：服务器状态
}
}

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

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

---

好的，在对代码进行了一些修补之后，我发现以下代码可以正常工作并且不会抛出错误：

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

从“/ServerStatus”导入服务器状态
导出默认值{
组成部分：{
“应用程序服务器状态”：服务器状态
}
}

可能应该是：

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

文档：

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

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

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

有关
键
属性的详细用法，请参阅
键

我通过向元素添加：key属性修复了相同的错误

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

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

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

可能是？所以可能不是？所以这只是一个猜测？通常应该使用迭代对象提供的唯一标识符。例如，server.id。对于数组键，在删除或重新排序数组元素时，可能会出现反应性问题。缺少ServerStatus文件扩展名.vue
  module.exports = {
    // this may not be a good option for beginners
    // as it will disable linting.
    lintOnSave: false
  }