I always get this error when working with v-for. It was not a problem before, but I don't like it because I started using it a lot in my project.

Why does Visual Studio Code give an error when working with vue js, even though I have written the codes correctly?

received error;

[vue/valid-v-for] Custom elements in iteration require 'v-bind:key' directives.eslint-plugin-vue

CodePudding user response：

You need to provide key in the v-for tag.

<app-card v-for="item in cards" :key="item.id"></app-card>

or

<app-card v-for="(item,index) in cards" :key="index"></app-card>

CodePudding user response：

As error saying itself, :key directive is missing as it should be there while working with v-for.

You don't need a key attribute in order to use v-for, but it's a good practice, that's why editor intelligence is telling you to add.

Please have a read of the official documentation of vue.js regarding maintaining state while using v-for.