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.