使用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>
然后再运行就不会再出现这个问题了。