欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端开发:Vue项目中解决Emitted value instead of an instance of Error问题

程序员文章站 2022-03-07 12:15:36
分享一个在刚接触前端开发的开发者常遇到的一个经典错误,那就是在Vue项目运行中遇到Emitted value instead of an instance of Error的问题,附带解决该问题的方法以及原理。重现报错提示:(Emitted value instead of an instance of Error) : component lists rendered with v-for should....

分享一个在刚接触前端开发的开发者常遇到的一个经典错误,那就是在Vue项目运行中遇到Emitted value instead of an instance of Error的问题,附带解决该问题的方法以及原理。

重现报错提示:

(Emitted value instead of an instance of Error) <van-cell v-for=" item  in this.todoList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

前端开发:Vue项目中解决Emitted value instead of an instance of Error问题

由于上述警告造成Vue项目不能启动,警告的大概意思就是在组件里面使用v-for 但是没有设置key,会造成非唯一性问题。

针对上述问题的解决方法:

在警告的组件里面v-for后面加一个属性key,为元素绑定了一个key,v-for="(item, index) in this.todoList" :key="index" 的操作,即:

<van-cell

              v-for="(item, index) in this.todoList" :key="index"

               :to="{ name: 'Approval/Detail', params: { id: item.businessId } }"

            >

              <van-icon name="bell" size="30" />

              <div class="info-right">

                <p class="user-info">{{ item.startBy }}</p>

                <p class="place">{{ item.processInstanceName }}</p>

              </div>

            </van-cell>

前端开发:Vue项目中解决Emitted value instead of an instance of Error问题

上述这样操作就避免了Emitted value instead of an instance of Error问题。

使用原理:

当使用v-for进行列表渲染时,虚拟dom和实际dom不一样,不能做唯一性,为元素绑定一个key,可以确保唯一性操作,这也是Vue官方推荐的做法。

 

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

三掌柜的微信公众号:

前端开发:Vue项目中解决Emitted value instead of an instance of Error问题

三掌柜的新浪微博:

前端开发:Vue项目中解决Emitted value instead of an instance of Error问题

 

本文地址:https://blog.csdn.net/CC1991_/article/details/110916130