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.