vue.js - 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=anything in (int)” . 然而 vue 警告我 v-for 制作的任何列表都需要唯一键。我想使用索引，但它是重复的，这没有给我警告，而是错误。我的下一次尝试是使用在

computed: { 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 方法:

methods: { rand: function() { return Math.random()*100 } }

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

谢谢，卡尔雷格:

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

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>