【发布时间】：2019-05-10 19:54:02
【问题描述】：
我在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 制作的任何列表都需要唯一键。我想使用索引，但它是重复的，这给了我没有警告但错误。 我的下一个尝试是使用在
中计算的一些随机值计算：{ 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：两个组件中的相同 ref 是我想要的，所以这里没有错误。
【问题讨论】：
-
当然@psidom 有个好主意，但真正的问题是键前缺少冒号。添加它解决了一个问题。