vue报错之Duplicate keys detected: '0'. This may cause an update error.

使用Vue的过程中报错:
Duplicate keys detected: 'v1'. This may cause an update error. found in……
翻译一下报错: 检测到重复的密钥:“ v1”。这可能会导致更新错误。

错误原因:
我们在使用v-for的时候,都要必须加上一个唯一的key值。然后在循环中两个标签得到的key的值是一样的,所以就导致了警告。

解决办法:
将key值修改为 可确认是唯一值 即可。

举例:
假设我们获取到的数组是这样的:

items = [{"valeu":"123","type":"1"},
         {"valeu":"123","type":"2"},
         {"valeu":"1234","type":"3"}]

然后我们v-for的时候这样写:

<option
        v-for="item in items"
        :key="item.valeu"
        :value="item.valeu"  
      >{{tem.valeu}}</option>

这个时候可以看到我们key绑定的是value,但是三组value是有重复值的,这样就会导致key不是唯一的从而出现报错。这时我们只要将key绑定为item.type即可,因为可以看到这组数据中每组数组的type都是唯一的。

<option
        v-for="item in items"
        :key="item.type"
        :value="item.valeu"  
      >{{tem.valeu}}</option>

然后再运行就不会再出现这个问题了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。