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.
