vue常见问题解决办法（二）|warning：component lists rendered with v-for should have explicit keys

最新推荐文章于 2024-09-27 10:04:00 发布

原创最新推荐文章于 2024-09-27 10:04:00 发布 · 2.3w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js

Vue.js 专栏收录该内容

3 篇文章

订阅专栏

本文解决了Vue.js中因未明确指定key而导致的警告问题。通过在v-for循环中为每个元素分配唯一的key属性，可以避免渲染列表时出现的警告，并提供了一个具体的代码示例。

命令行warning(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.
截图如下：
warning
这里只是推荐使用key.
原本的代码如下：

          <el-tag
            v-for = "feiLei of ruleForm.fenLeis"          
            :closable = "true"
            type = "primary"
            @close = "handleCloseFenLei(feiLei)">{{feiLei.name}}
          </el-tag>

运行时显示warning，添加：key即可，如下：

          <el-tag
            v-for = "feiLei of ruleForm.fenLeis"
            :key="feiLei1"        
            :closable = "true"
            type = "primary"
            @close = "handleCloseFenLei(feiLei)">{{feiLei.name}}
          </el-tag>

这样就不会报错啦，具体看文档，key不是必须的，仅仅是warning