我正在建立一个黑客的克隆,并且正在遇到以下错误:

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>

错误似乎来自单个。模板如下:

<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>

如果那里有人可以提供帮助,那就太好了!

答案

您只需避免使用:key在你的v-for

...
<div v-for="comment in comments">
...

作为vuejs文档说:

建议尽可能提供v-for的钥匙,除非迭代的DOM内容很简单,否则您有意依靠默认行为以获得性能提高。

来自: stackoverflow.com