Sometimes, we want to fix the ‘vue-language-server : Elements in iteration expect to have ‘v-bind:key’ directives’ warning in Vue.js.
In this article, we’ll look at how to fix the ‘vue-language-server : Elements in iteration expect to have ‘v-bind:key’ directives’ warning in Vue.js.
How to fix the ‘vue-language-server : Elements in iteration expect to have ‘v-bind:key’ directives’ warning in Vue.js?
To fix the ‘vue-language-server : Elements in iteration expect to have ‘v-bind:key’ directives’ warning in Vue.js, we should add the key prop to the component we’re using v-for on.
For instance, we write
<template>
<div>
<div v-for="(item, index) in items" :key="item.id">
{{ index }}. {{ item.name }}
</div>
</div>
</template>
to add the key prop and set it to a unique ID value.
The ID value will help Vue distinguish between each item being rendered with v-for.
Conclusion
To fix the ‘vue-language-server : Elements in iteration expect to have ‘v-bind:key’ directives’ warning in Vue.js, we should add the key prop to the component we’re using v-for on.
