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

Question

我正在尝试创建多个自定义组件(只是作为概念证明，所以只需将同一组件复制 5 次就没什么了不起的)但我收到以下错误:

Custom elements in iteration require 'v-bind:key' directives.

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

<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 中使用组件的限制，我在某处需要一个 key ——只是不太确定正确的方法。有人可以告诉我如何修改该特定示例以仅显示该组件 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 得到了这个解决方案