Bootstrap

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值的时候一定要注意值不能重复,不然就会引起此报错

;