[Vue警告]：避免将非原始值用作键，而应使用字符串/数字值

Question

我正在构建一个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>

该错误似乎来自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>

如果有任何人可以帮助您，那就太好了！？

Answer 1

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

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

例如Vue.js Documentation

Answer 2

来自<div v-for="comment in comments" :key="comment">的警告源，其中对象comment用作key的{​​{1}}。警告的含义很直白，请勿将Object用作键。

使用唯一的原始值作为键，例如v-for或comment.id

Answer 3

其他答案也可以，但是以下方法也值得一试：

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

Answer 4

您可以简单地避免在ImportError: No module named can 中使用can。

:key

vuejs documentation说：

  

建议尽可能使用v-for提供密钥，除非   重复的DOM内容很简单，或者您有意依赖   提高性能的默认行为。

Answer 5

以下是对我有用的示例。希望有帮助

Answer 6

也许你使用的是一个Object类型作为key，如果它可以转换成一个唯一的字符串，通过调用例如toString来使用字符串而不是实例。

当我使用 mongoose.Types.ObjectId() 作为键时，我遇到了同样的问题，在我更改为 mongoose.Types.ObjectId().toHexString() 后，警告消失了。

Answer 7

根据 vue js Maintaining State Doc 它说你的 id 被多次找到

这意味着你的代码应该是这样的

div v-for="comment in comments" :key="comment.id">

插入

div v-for="comment in comments" :key="comment">

为了给 Vue 一个提示以便它可以跟踪每个节点的身份，从而重用和重新排列现有元素，您需要为每个项目提供一个唯一的键属性

Answer 8

此处出现此警告是因为您在:key="comment"中使用了<div v-for="comment in comments" :key="comment">。只需删除:key="comment"。