Vue 提示 Duplicate keys detected: \'0\'. This mar cause an update error 如何处理

ppylox
·2/14/2021·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

Vue开发中出现Duplicate keys错误时需注意:当同一父元素下有两个div同时使用v-for且都采用:key="index"时,会因key值重复触发该错误。解决方法是将两个v-for分别放入不同的父元素div中,避免同一层级下key冲突,从而消除重复key警告并防止更新错误。

\n

在vue的开发过程中,如果出现Duplicate keys这种错误,需要注意一下。

\n\n\n\n

首先保持 :key="index",如果就两个div的同一个父元素下,又同事使用v-for,就可能会出现这种情况,有问题的写法:

\n\n\n\n
<div>\n	<div v-for="item in listone">one</div>\n	<div v-for="item in listtwo">two</div>\n</div>\n
\n\n\n\n\n\n\n\n

换一种写法可以避免出现这个问题:

\n\n\n\n
<div>\n	<div v-for="item in listone">one</div>\n</div>\n<div>\n	<div v-for="item in listtwo">two</div>\n</div>
\n

相关文章

评论 (0)

暂无评论,来写第一条吧