Vue项目使用v-for遍历变量,报错:component lists rendered with v-for should have explicit keys 的解决办法
操作环境
WebStorm + Vue + Element UI
出错的前端代码
<el-tag style="margin: 1px 2px;"
v-for="(r,indexj) in hr.roles"
type="success">{{r.namezh}}
</el-tag>
报错信息
(Emitted value instead of an instance of Error) :
component lists rendered with v-for should have explicit keys.
See https://vuejs.org/guide/list.html#key for more info.
原因和解决办法
原因
v-for 必须配置 :key
解决办法
把代码改成:
<el-tag style="margin: 1px 2px;"
v-for="(r,indexj) in hr.roles" :key="indexj"
type="success">{{r.namezh}}
</el-tag>