[Vue warn]: Avoid using non-primitive value as key, use string/number value instead

Question

I'm building a clone of HackerNews and am getting the following error:

vue.esm.js?efeb:591 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.  found in  ---> <Single> at src/components/Single.vue        <App> at src/App.vue          <Root> 

The error seems to be coming from Single.vue but I can't work what it is? The template is as follows:

<template>     <div class="container">         <h2>{{ story.title }}</h2>         <p>Score: {{ story.score }}</p>         <p>{{ story.url }}</p>         <div v-for="comment in comments" :key="comment">           <div class="comment-wrap">                 <div class="comment-block">                     <p class="comment-text">{{ comment.text }}</p>                     <div class="bottom-comment">                         <div class="comment-author">{{ comment.by }}</div>                         <div class="comment-date">{{ comment.time }}</div>                     </div>                 </div>             </div>         </div>     </div> </template> 

If anyone out there can help, that would be great!?

Answer 1

Other answers work, but the following is also worth a try:

<div v-for="(comment, idx) in comments" :key="idx">   <!-- ... --> </div>