[Vue warn]: Duplicate keys detected:'XXXX'.This may cause an update error.

问题描述

选择框远程搜索时报以下警告，并且搜索卡死，搜了一下，原来是v-for循环里绑定的key出现重复问题，

问题解决

修改前
因为远程搜素的是公司名称，可能会出现重复的公司名，所以绑定item.value不严谨

修改后
使用模板字符串拼接

为什么不用index或随机数做key

index

	<div v-for=(item, index) in list :key='index'>{{item.name}}</div>
	
	let list = [
		{ id: 123, name: '摩卡' },
		{ id: 124, name: '小黑' },
		{ id: 125, name: '小黄' }
	]
	
	渲染为
	<div key=0>摩卡</div>
	<div key=1>小黑</div>
	<div key=2>小黄</div>

	执行
	list.unshift({ id: 122，name: '小小白' })
	
	渲染为：                 新旧对比：                
	<div key=0>小小白</div>         <div key=0>摩卡</div>
	<div key=1>摩卡</div>           <div key=1>小黑</div>
	<div key=2>小黑</div>           <div key=2>小黄</div>
	<div key=3>小黄</div>
        
	可以看出，如果用index作为key的话，相当于更新了原有的三项，并增加了小黄，这样很耗性能

        用id作为key值
        渲染为：                  新旧对比：
        <div key=122>小小白</div>        
	<div key=123>摩卡</div>          <div key=123>摩卡</div>
	<div key=124>小黑</div>          <div key=124>小黑</div>
	<div key=125>小黄</div>          <div key=125>小黄</div>
    
        可以看出原有的三项都不变，只是增加了小小白，nice

随机数
随机数的不确定性和可能出现重复情况，都是不能作为key值的原因