How to solve the problem of red and warning when using v-for in vue (detailed tutorial)

Below I will share with you an article based on vue that solves the problem of red reporting and warning when using v-for. It has a good reference value and I hope it will be helpful to everyone.

Code red reporting is very uncomfortable for patients with obsessive-compulsive disorder who pursue beautiful code. The red reporting is as follows:

There will also be prompts like

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

in the console. To solve this problem of red reporting, we need to cycle according to his prompts. When adding a unique key, choose to use index here:

<ul 
class="clearfix course-list">
<li 
class="left" 
v-for="(item,index)
in gradeClassfy.primary.grade"
:key="index"><a
href="#" rel="external nofollow" >{{item.name}}</a></li>
</ul>

In this way, the red report disappears.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to customize the player based on vue-video-player

Vue encapsulates a simple and lightweight Examples of a large number of upload file components

Implementing a lucky draw page based on JavaScript

##

The above is the detailed content of How to solve the problem of red and warning when using v-for in vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!