vue控制台报错Duplicate keys detected: ‘1217‘. This may cause an update error.

今天运行项目的时候，F12突然报错Duplicate keys detected: ‘1217’. This may cause an update error.

虽然不影响正常使用，但是还是要解决的，所以就查了一些资料，最终得知，是因为v-for循环中绑定的key值重复了，于是查看代码中，我的代码里有好几个v-for循环

<div>
  <h2>热门城市</h2>
  <ul>
    <li  v-for="i in hotList" :key="i.id">{{i.nm}}</li>
  </ul>
</div>
<div>
  <div v-for="item in cityList" :key="item.id">
    <h2>{{item.index}}</h2>
    <ul v-for="i in item.list" :key="i.id">
      <li>{{i.nm}}</li>
    </ul>
  </div>	
</div>
<ul>
  <li v-for="(item,index) in cityList" :key="item.id">{{item.index}}</li>
</ul>

最终一个个更改这4个v-for循环的值才找到错误，是我在循环item.list的时候绑定的i.id重复了，就是数据库中有两个id=1217的值，最后我把key的绑定改为他们的index值，完美解决，代码如下

<ul v-for="(i,index) in item.list" :key="index">
	<li>{{i.nm}}</li>
</ul>

绑定key值的时候一定要注意值不能重复，不然就会引起此报错