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

Question

列表项

一个包含对象数组的变量，如下所示：

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

我想在类似这样的组件中循环遍历它

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

我应该在 key 属性中放什么？

Answer 1

你可以放索引：

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

Answer 2

如documentation

中所述

The key special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.

它也将用于

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

唯一的要求是您的密钥不能有任何重复项

Children of the same common parent must have unique keys. Duplicate keys will cause render errors.

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

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

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

注意这是未优化和see here why

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

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

How to use the key special attribute inside the v-for directive using an array of arrays

javascript

vue.js

vuejs3