Vue：Duplicate keys detected: '0'

2022-12-20 周二
中文大概是 : 检测到重复键 : '0'. '0'可能会导致一个更新错误。

问题所在

在同一层DOM节点上,vue发现key不是唯一的，是会报错。
但是如果不是在同一层DOM使用v-for循环,则不会报错。
所以呢,如果不在同一层DOM上进行for循环,就可以保证了key的唯一性。(对于:key的作用还没有接触到.)

解决办法

我想到的就是多加一层html标签,但是这样会多出一些没有语义的标签,仅是为了保证key的唯一性而添加标签,但是相比于手动拼接字符串我更愿意这样。

示例代码

   <div id="app">
        <p v-for='(item,index) in cyclicData' :key='index'>{{item}}</p>
        <hr>
        <div><!--如果去掉这一层div则会报错.因为在同一层DOM节点上 :key的value有重复的-->
            <p v-for='(item,index) in sortCyclicData' :key='index'>{{item}}</p>
        </div>
    </div>