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.