getting error in my Home.vue file as using v-for loop

Question

In my Home.vue component file I have a template in side which I have a component app-server-status which i am runing as a v-for loop but it is throwing warning and shows error in my file how can I solve that I have googled a lot but didn't found any thing helpful

 <template>
<div>
    <app-server-status v-for="server in 4"></app-server-status> //this line shows error

</div>


</template>
<script>
import serverStatus from '../Components/ServerStatus.vue'
export default{
components: {
    'app-server-status':serverStatus
}
}
</script>

The error it shows is -:

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

I have not installed eslint

Sarjerao Ghadage · Accepted Answer · 2019-09-13 05:54:06Z

1

I have updated your code here

<template>
<div>
    <app-server-status v-for="server in 4" v-bind:key="server"></app-server-status> //this line shows error

</div>


</template>
<script>
import serverStatus from '../Components/ServerStatus.vue'
export default{
components: {
    'app-server-status':serverStatus
}
}
</script>

answered Sep 13, 2019 at 5:54

Sarjerao Ghadage

1,55616 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user11543110 Over a year ago

Is it compulsory to use v-bind:key="server" whenever I got stuck in something like this? can't we fix it with some installation?

Sarjerao Ghadage Over a year ago

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. It is recommended to provide a key attribute with v-for

Abdelillah Aissani · Accepted Answer · 2019-09-13 06:08:54Z

1

You are getting an error because you didn't bind keys for your loop elements ... this is completely ok if your loop is only for display purpose ( no mutations ) you can ignore the error however if you want to mutate one of the elements during render then you have to bind keys so Vue knows which exact element you are trying to mutate / delete .

 <app-server-status v-for="server in 4" :key="server"></app-server-status>

NB: it's not recommended to bind indexes.

It is recommended to provide a key attribute with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains

answered Sep 13, 2019 at 6:08

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

Collectives™ on Stack Overflow

getting error in my Home.vue file as using v-for loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related