如何在v-for指令中使用一个数组的数组来使用key特殊属性

Question

1. 列表项

一个包含数组的数组的变量，如下所示:

let FooVar: Array<Array<FooObject>> = [] ;

我想在组件中循环它，就像这样

<span v-for="item in FooVar" :key="XXX">

key属性里面应该放什么?

Answer 1

如文档中所说

key特殊属性主要用于提示Vue的虚拟DOM算法在区分新节点列表和旧节点列表时识别vnode。

也可用于

• 正确触发组件的生命周期钩子
• 触发

唯一的要求是你的键不能有任何重复的

相同父节点的子节点必须具有唯一的key。重复的键会导致渲染错误。

---

一般来说，最好的方法是为项目添加一个唯一标识符，例如来自数据库的id

<span v-for="item in FooVar" :key="item.id">

如果您没有任何id，那么您可以使用列表中项目的索引。

注意这是不是优化了，看看为什么

<span v-for="(item, index) in FooVar" :key="index">

Answer 2

你可以把index:

<span v-for="(item, index) in FooVar" :key="index">