[Vue warn]: Avoid using non-primitive value as key, use string/number value instead
Other answers work, but the following is also worth a try:
<div v-for="(comment, idx) in comments" :key="idx">
<!-- ... -->
</div>
The warning sources from <div v-for="comment in comments" :key="comment">
, where the object comment
is used as a key
for v-for
. The meaning of the warning is quite literal, don't use Object as key.
Use unique primitive value as key, maybe something like comment.id
or ${comment.time}${comment.by}
You can simply avoid the use of :key
in your v-for
.
...
<div v-for="comment in comments">
...
As vuejs documentation said:
It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.