关于前端:前端开发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 问题。

应用原理：
当应用 v -for 进行列表渲染时，虚构 dom 和理论 dom 不一样，不能做唯一性，为元素绑定一个 key，能够确保唯一性操作，这也是 Vue 官网举荐的做法。

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