Share a classic error that developers who have just come into contact with front-end development often encounter, that is, the problem of “emitted value instead of an instance of error” in the running of Vue project, with the method and principle to solve the problem.

Repeat error prompt:

(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.

Due to the above warning, the Vue project cannot be started. The general meaning of the warning is to use V-for in the component, but the key is not set, which will cause non uniqueness problems.

The solutions to the above problems are as follows

In the warning component, an attribute key is added after V-for to bind a key to the element. V-for = (item, index) in this.todolist “: key =” index “operation, that is:

            <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>

The above operation avoids the problem of emitted value instead of an instance of error.

Principle of use:

When using V-for for list rendering, the virtual DOM is different from the actual Dom and cannot be unique. Binding a key to an element can ensure the uniqueness operation, which is also the official recommendation of Vue.

The above is the whole content of this chapter. Welcome to the WeChat official account of the three shopkeeper, “iOS development by three shopkeeper”, three shopkeeper’s Sina micro-blog “three shopkeeper 666”, welcome to pay attention!

Three WeChat’s official account:

Sina Weibo of three shopkeepers: