Sometimes, we want to fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js.
In this article, we’ll look at how to fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js.
How to fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js?
To fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js, we should use a primitive value as the value of the key prop when we’re using v-for.
For instance, we write
<template>
<div>
...
<div v-for="comment in comments" :key="comment.id">...</div>
...
</div>
</template>
to set the key prop to comment.id where comment.id is a unique ID string of each comments entry.
The key prop’s value helps Vue identify each item being rendered with v-for.
Conclusion
To fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js, we should use a primitive value as the value of the key prop when we’re using v-for.
