Vue报错:“Duplicate keys detected:‘***‘.This may cause an update error”
vue开发过程中遇到如题报错,意思是检测到重复key,可能导致更新错误。错误原因:使用v-for时通常标准化的需要一个唯一的key值。当使用了两个循环,且循环遍历的是同一个数组/对象时,key同时也一样就会报这个错误。因为vue的数据是双向绑定的,所以数据更新会引起视图的更新,而对于要使用v-for循环的结构体,key是用于区分每个item更新的关键,所以当key重复的时候科能导致一条数据更新的同
vue开发过程中遇到如题报错,意思是检测到重复key,可能导致更新错误。
错误原因:使用v-for时通常标准化的需要一个唯一的key值。当使用了两个循环,且循环遍历的是同一个数组/对象时,key同时也一样就会报这个错误。
因为vue的数据是双向绑定的,所以数据更新会引起视图的更新,而对于要使用v-for循环的结构体,key是用于区分每个item更新的关键,所以当key重复的时候科能导致一条数据更新的同时让两个key重复的不同元素同时更新,或者以key为唯一标识的item无法准确识别需要更新的对象,因此vue文档在进行v-for使用时会提醒保持key的唯一性。
开发环境中的具体情况:使用admin-template时手动修改sidebar的页面路由,不经意间将多个页面路由设置为相同的path,而path时循环遍历时确定选中的唯一key,所以报错。这样导致通过点击切换页面时,path相同的页面无法被精确识别,而跳转出现混乱。
解决方法:如果是使用了多个循环遍历同一个数组/对象的情况,只需要让每个循环绑定的key各不相同给即可。
如果是和我开发环境中类似的情况——即“一个循环中,作为key绑定的字段,多个item是相同的导致key的唯一标识作用失效的,请修改重复的key,保证唯一性”
更多推荐
所有评论(0)