Sometimes, we want to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js.

In this article, we’ll look at how to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js.

How to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js?

To fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js, we should set the key prop of each item in the list to a unique value.

For instance, we write

<template>
  <div>
    <todo-item
      v-for="todoItem of todos"
      :data="todoItem"
      :key="todoItem.id"
    ></todo-item>
  </div>
</template>

to set the key prop to the todoItem.id value where todoItem.id is the unique ID for each item in the todos array.

Conclusion

To fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js, we should set the key prop of each item in the list to a unique value.