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创建的任何列表都需要唯一的键，我想使用index，但是它是重复的，因此没有警告，只有错误。我的下一个尝试是使用在... p中计算出的一些随机值

计算：{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>

Vue-如何在3中使用v-for =“ item创建唯一键”

1 个答案: