vue2.0 v-for的警告

vue

在使用vue中v-for遍历时遇到了一个警告

: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

这里翻译过来就是:组件list在使用v-for渲染是需要有一个明确的keys属性,所以我们需要给组件添加一个key属性,值是唯一的。

下面是官方原文:

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):

1
2
3
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。


仔细阅读官方文档,好处多多

-- EOF --