vue3 table的tr外有3层循环，使用<template v-for 不能使用key怎么办？

Question

vue3 table的tr外有3层循环，使用<template v-for 不能使用key怎么办？
<template v-for="(item,i) in arr" :key="i">编译报错 cannot be keyed. Place the key on real elements instead
如：

<template v-for="(item,i) in arr" :key="i">
    <template v-for="(item1,i1) in arr" :key="i1">
        <template v-for="(item2,i2) in arr" :key="i2">
              <tr></tr>
        </template>
    </template>
</template>

解决方法：

<template v-for="(item,i) in functionList">
    <div :key="i">{{item.label}}</div>
</template>

Answer 1

Vue3 会去检测在 <tempalte> 元素上的 key， 把他放到循环内部的真实DOM元素上就可以了。比如说你的 tr 元素上面。