[Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.

最新推荐文章于 2023-12-13 17:37:47 发布

原创最新推荐文章于 2023-12-13 17:37:47 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

文章讲述了在Vue.js中，由于两个div使用了相同的:key值导致可能的重复渲染问题，解决方法是为其中一个:key赋以不同的值，如index+1，确保每个循环实例有唯一的标识。

0 原因

两个div v-for使用了同样的:key

<div class="fileNameBox" v-for="(item, index) in baseFileList" :key="index"></div>
<div class="fileNameBox" v-for="(item, index) in bidFileList" :key="index"></div>

1 解决方法

跟换其中一个:key值即可

<div class="fileNameBox" v-for="(item, index) in baseFileList" :key="index"></div>
<div class="fileNameBox" v-for="(item, index) in bidFileList" :key="index + 1"></div>