Solve the problem of red and warning when using v-for in vue

This time I will bring you a solution to v-for using red and warning in vue, vue to solve v-for using red and warning What are the precautions , the following is a practical case , let’s take a look.

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 this in the console:

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

. To solve this problem of red reports, we need to follow his prompts and add a unique one when loop 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 article is based on solving the problem of red reporting and warning when using v-for in vue. This is all the content shared by the editor. I hope it can give you a reference. I also hope that Please support Script House a lot.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed graphic explanation of Vue.directive()

Detailed explanation of JsChart component usage

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