Home > Article > Web Front-end > 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!