Duplicate keys detected: ‘***‘. This may cause an update error

21 篇文章 0 订阅

在开发vue项目时遇到  Duplicate keys detected: '13'. This may cause an update error错误,这个错不会影响页面显示,但是会一直在控制台上打印。如图 

 

错误原因:v-for循环时设置的key值不是唯一的。如图 

解决方案

设置v-for循环的key是唯一的。如图 

 

 

   

 

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
这个错误信息"Duplicate keys detected: 'NDZH60A6000'. This may cause an update error." 是由于在Vue的v-for循环中,出现了重复的key值导致的更新错误。解决该问题的方法是使用唯一的id值来作为key值。你可以使用nanoid这个库生成一个唯一的id,可以通过导入{ nanoid } from 'nanoid'来使用。默认情况下,nanoid会生成一个长度为21的字符串作为id,例如:LZfXLFzPPR4NNrgjlWDxn。如果需要指定生成的字符串长度,可以在nanoid的括号中填入参数,例如:const id = nanoid(11)。然后将生成的id作为key值绑定到对应的元素上即可解决此问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [[Vue warn]: Duplicate keys detected: ‘2‘. This may cause an update error.](https://blog.csdn.net/qq_45284875/article/details/130112581)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue控制台报错Duplicate keys detected: ‘xxxx‘. This may cause an update error.解决方案](https://blog.csdn.net/m0_61726249/article/details/131228855)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue — 报错:Duplicate keys detected: ‘892834eb-a50c-488c-83ea-cc23f05e... This may cause an update](https://download.csdn.net/download/weixin_38663169/14043073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值