This is the third day of my participation in Gwen Challenge

There are all kinds of classic problems encountered during front-end development, especially for beginners. Emitted value instead of an instance of Error Emitted by a Vue project is a classic Emitted value of an instance of Error encountered by developers new to front-end development, including a solution and mechanism.

First, let’s reproduce the error message

After running the project, the project does not run and has an error as shown below:

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

Because of the above warning, the Vue project cannot be started. Through analysis of the above warning, the general meaning of the warning is that although v-for is used in the component, the key is not set, which will cause a non-unique problem. Through the official Vue documentation, also explained when using V-for to set the key.

Solutions to the above problems

The solution to the above problem is also very simple, just add a key to the component that has the warning v-for, bind a key to the element, such as v-for=”(item, index) in this.todolist “:key=”index” operation. Here is an example:

 <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>
Copy the code

According to the above example, the Emitted Error problem mentioned at the beginning of this article can be effectively solved, and it perfectly solves the problem of Emitted value instead of an instance of Error.

Use principle to solve the above problems

When v-for is used for list rendering, the virtual DOM is different from the real DOM and cannot be unique. Binding a key to the element ensures uniqueness, which is also recommended by Vue.

conclusion

Through the problem points explained in this paper, although the problem is simple, but more classic, it is worth learning from xiaobai. Again in the future development of the same type of problem, can be very good to solve, only in the early stage of development, with the precipitation and in-depth technology, looking back at this problem will feel very simple, more or record use.

The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “Program Ape by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention!