vue3.x 报错: Duplicate keys detected: xx. This may cause an update error.解析

熊孩纸 阅读:262 2021-04-01 12:05:30 评论:0

VUE for循环报错:

	 // template 
	<ul> 
      <li v-for="(item) in oli" :key="item.id+Math.random()">{
   {
    item.value }}</li> 
    </ul> 
   // data 
     oli: [ 
        {
    
          id: 1, 
          value: '北京' 
        }, 
        {
    
          id: 2, 
          value: '上海' 
        }, 
        {
    
          id: 3, 
          value: '深圳' 
        }, 
        {
    
          id: 4, 
          value: '郑州' 
        }, 
        {
    
          id: 4, 
          value: '杭州' 
        } 
      ] 

报错 Duplicate keys detected: xx. This may cause an update error.
原因:因为循环key 要保证唯一性这里是因为key值重复
解决办法:保证key唯一 可以在Key后面随机数Math.random()

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们