Vue.js 使用v-for循环时在my Home.vue文件中获取错误

在我的Home.vue组件文件中，我有一个模板，旁边有一个组件

app server status

，我正在运行该组件作为

v-for

循环，但它在我的文件中抛出警告并显示错误。我如何解决我在谷歌上搜索了很多东西，但没有发现任何有用的东西

 <template>
<div>
    <app-server-status v-for="server in 4"></app-server-status> //this line shows error

</div>


</template>
<script>
import serverStatus from '../Components/ServerStatus.vue'
export default{
components: {
    'app-server-status':serverStatus
}
}
</script>

//这一行显示错误
从“../Components/serverStatus.vue”导入服务器状态
导出默认值{
组成部分：{
“应用程序服务器状态”：服务器状态
}
}

它显示的错误是-：

[vue/valid-v-for]
迭代中的自定义元素需要“v-bind:key”指令。eslint插件vue

---

我没有安装

eslint

我已经在这里更新了您的代码

<template>
<div>
    <app-server-status v-for="server in 4" v-bind:key="server"></app-server-status> //this line shows error

</div>


</template>
<script>
import serverStatus from '../Components/ServerStatus.vue'
export default{
components: {
    'app-server-status':serverStatus
}
}
</script>

//这一行显示错误
从“../Components/serverStatus.vue”导入服务器状态
导出默认值{
组成部分：{
“应用程序服务器状态”：服务器状态
}
}

您收到一个错误，因为您没有为循环元素绑定键。。。如果循环仅用于显示目的（无突变），则完全可以忽略该错误。但是，如果要在渲染期间突变其中一个元素，则必须绑定关键帧，以便Vue知道要突变/删除的确切元素

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

NB：不建议绑定索引

建议尽可能使用v-for提供键属性，除非迭代的DOM内容很简单，或者您有意依赖默认行为来提高性能

---

每当我陷入这样的困境时，是否必须使用

v-bind:key=“server”

？我们不能通过一些安装来修复它吗？为了给Vue一个提示，使其能够跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供一个唯一的键属性。建议使用v-for提供键属性