写点什么

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

作者:三掌柜
  • 2021 年 12 月 04 日
  • 本文字数:1021 字

    阅读完需:约 3 分钟

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

前言

在前端开发过程中会遇到各种各样稀奇古怪的问题,有简单的又复杂的,那么本文就来分享一个关于刚接触前端开发的开发者经常遇到的一个经典错误,那就是在 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 项目不能启动,警告的大概意思就是在组件里面使用 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>
复制代码



通过上面的这种操作,就避免了运行项目报错 Emitted value instead of an instance of Error 的问题,这也是前端 Vue 官方建议要求这样操作的,不理解者可以先强行记住。


使用原理

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


最后

通过本文对于在前端开发中 Vue 项目解决 Emitted value instead of an instance of Error 问题的方法,读者可以很好的了解相关报错的解决方案以及原理,虽然知识点不难,但是总会有人前赴后继的遇到该问题,所以只需了解对应的解决方法即可,这里不再赘述。


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

发布于: 3 小时前阅读数: 6
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
12月日更、28 天写作计划第三天
3 小时前
回复
没有更多了
前端开发:Vue项目中解决Emitted value instead of an instance of Error问题