Vue - 如何使用 v-for="item in 3" 创建唯一键

Question

我在 Vue 中有这样一个模板：

    <AutoTaskBlock  ref="block" v-for="(block, index) in 2" key="index" class="block"></autoTaskBlock>
    <AutoTaskCircle ref="block" v-for="(circle, index) in 3" key="index" class="circle"></autoTaskCircle>

所以我确实有两个“从空中”创建的组件列表 - 我不使用任何数组来创建它 - 这有助于我使用“v-for =“（int）中的任何东西”。但是 vue警告我 v-for 制作的任何列表都需要唯一键。我想使用索引，但它是重复的，这给我没有警告但错误。我的下一次尝试是使用一些随机值

计算：{ rand() { return Math.random()*100 } }

但像这样使用它：

    <AutoTaskBlock  ref="block" v-for="(block, index) in 2" key="rand" class="block"></autoTaskBlock>
    <AutoTaskCircle ref="block" v-for="(circle, index) in 3" key="rand" class="circle"></autoTaskCircle>

..导致同样的错误。检查后 - 计算的“rand”仅在创建时随机化，而不是稍后，因此每个都是相同的。下一次尝试是像这样创建 rand 方法：

方法：{ rand: function() { return Math.random()*100 } }

但同样 - 出现重复键错误。有没有办法使用这样的两个列表并给它们一个唯一的键？

谢谢，卡勒格：

PS：两个组件中的相同引用是我想要的，所以这里没有错误。

Answer 1

一种选择是为index要创建重复数据的每个列表添加一个唯一的词作为前缀；对于您的情况，例如'block' + index和'circle' + index：

<AutoTaskBlock  ref="block" v-for="(block, index) in 2" :key="'block' + index" class="block"></autoTaskBlock>
<AutoTaskCircle ref="block" v-for="(circle, index) in 3" :key="'circle' + index" class="circle"></autoTaskCircle>