Javascript [Vue 警告]：避免使用非原始值作为键，使用字符串/数字值代替

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

提问by Drostan

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

我正在构建 HackerNews 的克隆并收到以下错误：

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:

错误似乎来自 Single.vue 但我无法工作它是什么？模板如下：

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

如果有人可以提供帮助，那就太好了！？

采纳答案by jotade

You can simply avoid the use of :keyin your v-for.

您可以简单地避免:key在您的v-for.

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

As vuejs documentationsaid:

正如 vuejs文档所说：

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.

建议尽可能为 v-for 提供一个键，除非迭代的 DOM 内容很简单，或者您有意依赖默认行为来提高性能。

回答by silvan

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

其他答案有效，但以下也值得一试：

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

回答by William Chong

The warning sources from <div v-for="comment in comments" :key="comment">, where the object commentis used as a keyfor v-for. The meaning of the warning is quite literal, don't use Object as key.

警告来自<div v-for="comment in comments" :key="comment">，其中对象comment用作keyfor v-for。警告的意思是字面意思，不要使用 Object 作为键。

Use unique primitive value as key, maybe something like comment.idor ${comment.time}${comment.by}

使用唯一的原始值作为键，可能类似于comment.id或${comment.time}${comment.by}

回答by EsterlingAccime Youtuber

Below is an example of what works for me. Hope that helps

下面是一个对我有用的例子。希望有帮助

回答by Vishal Vaghasiya

Use unique primitive value as key, It is recommended to provide a keyattribute with v-forwhenever possible.

使用唯一的原始值作为键，建议尽可能提供一个key属性v-for。

like :key="design.uniqueId"

喜欢 :key="design.uniqueId"

<li v-for="design in designs" :key="design.id">
    <!-- code -->
</li>

<li v-for="loop in loops" :key="loop.id">
    <!-- code -->
</li>

Such as Vue.js Documentation

比如Vue.js 文档

回答by Runstone

This warning occurs here because you use :key="comment"in <div v-for="comment in comments" :key="comment">. Just delete :key="comment".

出现此警告是因为您:key="comment"在<div v-for="comment in comments" :key="comment">. 删除即可:key="comment"。