Chrome Extension

Elements in iteration expect to have 'v-bind:key' directives .vue template error

I am developing an application in Vuejs using its template engine. I am using .vue pages to create my components. But when I use v-for on an element to apply a loop on array items, it is showing error as asked in the question title and above it is showing [vue/require-v-for-key].

The code that I am using is as follow:

<ul>
    <li v-for="(student, index) in Students">
        {{student.name}}
    </li>
</ul>
1 Answers

If you are using v-for in Vuejs you will have to bind unique key with the iterative element. You can use v-bing:key or :key and pass unique value or index to it. The code for that is

<ul>
    <li v-for="(student, studentIndex) in Students" :key="studentIndex">
        {{student.name}}
    </li>
</ul>

We used studentIndex of v-for to pass unique value to it. You can also pass student object to it.

Never leave your website again in search of code snippets by installing our chrome extension.
Open Code Manager We are hiring