vue报错之Duplicate keys detected: '

使用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>

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