Question

文档并不是特别清楚key属性在v-for内的独特性。我猜测它们在v-for的特定实例中应该是唯一的，并且您必须将具有相同键的元素的v-for分开。

https://vuejs.org/v2/guide/list.html#key

如果我的网页上有两个具有v-for的实例的组件，它们是否都具有相同键的元素？

Answer 1

它是v-for中的唯一键。 Vue使用它将DOM元素与特定列表中的viewmodel元素相关联。 v-for中的元素与其外部的元素之间不存在混淆，否则每个元素都需要key。

Answer 2

实际上有一个细微的差别：键需要是唯一的对于父元素的所有子元素...

因此，如果您有两个带有 v-for 指令的元素是同一个父元素的子元素，则这两个元素必须不能共享相同的键！

这就是前几天让我感到困惑的情况（两个 xTick 和 yTick 数组都可能包含值“0”，这导致了冲突！）

 <g>
  <line
    v-for="(position) in xTicks"
    :key="position.toString()"
    ...
  />
  <line
    v-for="(position) in yTicks"
    :key="position.toString()"
    ...
  />
</g>

通过前缀键解决

`xtick-${position.toString()}`

参考：https://forum.vuejs.org/t/v-for-key-does-the-key-need-to-be-unique-across-the-entire-component/28040

v-for key属性在特定v-for

2 个答案: