Home Web Front-end JS Tutorial How to solve the problem of red and warning when using v-for in vue (detailed tutorial)

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

Jun 01, 2018 pm 03:30 PM
v-for Appear

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

1

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

Copy after login

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:

1

2

3

4

5

6

7

8

9

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

Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Tips for using v-for to implement dynamic sorting in Vue Tips for using v-for to implement dynamic sorting in Vue Jun 25, 2023 am 09:18 AM

Tips for using v-for to implement dynamic sorting in Vue

Detailed explanation of v-for function in Vue3: perfect solution to list data rendering Detailed explanation of v-for function in Vue3: perfect solution to list data rendering Jun 18, 2023 am 09:57 AM

Detailed explanation of v-for function in Vue3: perfect solution to list data rendering

How to solve '[Vue warn]: v-for='item in items': item' error How to solve '[Vue warn]: v-for='item in items': item' error Aug 19, 2023 am 11:51 AM

How to solve '[Vue warn]: v-for='item in items': item' error

Best practices and performance optimization methods for using v-for in Vue Best practices and performance optimization methods for using v-for in Vue Jul 17, 2023 am 08:53 AM

Best practices and performance optimization methods for using v-for in Vue

Which one has higher priority, v-if or v-for in vue? Which one has higher priority, v-if or v-for in vue? Jul 20, 2022 pm 06:02 PM

Which one has higher priority, v-if or v-for in vue?

v-for function in Vue3: perfect solution to list data rendering v-for function in Vue3: perfect solution to list data rendering Jun 19, 2023 am 08:04 AM

v-for function in Vue3: perfect solution to list data rendering

Vue error: Unable to use v-for instruction correctly, how to solve it? Vue error: Unable to use v-for instruction correctly, how to solve it? Aug 17, 2023 pm 10:45 PM

Vue error: Unable to use v-for instruction correctly, how to solve it?

How to use v-for instruction to loop output objects in Vue How to use v-for instruction to loop output objects in Vue Jun 11, 2023 am 08:51 AM

How to use v-for instruction to loop output objects in Vue

See all articles