您现在的位置是：首页 > 前端开发 Vue 报错 Avoid using non-primitive value as key, use string/number value instead

Vue 报错 Avoid using non-primitive value as key, use string/number value instead

2020-09-09 【前端开发】 681人已围观 872次浏览

简介Vue 报错 Avoid using non-primitive value as key, use string/number value instead

Vue 项目开发中，控制台出现提示

Avoid using non-primitive value as key, use string/number value instead

避免使用非基元值作为键，而是使用字符串/数字值

一般出现此类提示都是因为在 v-for 循环中，绑定的 key 是对象的原因，比如

<div
  v-for="item in bannerList"
  :key="item">
</div>

在这种情况下，item 实际就是个对象，而不是具体的字符串或者数值，所以才会出现上面提示的报错

修改为下面的形式，将绑定的key设置为具体的内容字段即可，比如

<div
  v-for="item in bannerList"
  :key="item.id">
</div>

修改之后，保存刷新页面，报错提示就没有了

很赞哦！ (0)