Vue,前端动态生成的列表,在生成的时候应该用什么作为key呢?

船到桥头自然直
  • 114

已知,用index作为v-for循环渲染列表的key值是不建议的

一般情况下,如果是查询列表,我是把id值绑定为key的

但如果是前端动态生成的列表,在第一次新建的时候,该列表是没有id值的
(需要第一次保存之后再查询,后台接口会返回id值)

再加上列表组件新建和查询的时候是公用的同一个组件(只是初始化的list的值不同),那么在第一次新建的时候没有id值,此时该如何处理呢?

<ul>
  <li v-for="i in list" :key="i.id"></li>
</ul>
回复
阅读 294
2 个回答

这样应该可以了,变量名+索引,或者功能描述啥的+索引

 <li v-for="(item, index) in list" :key="'list' + index"></li>

在下倒有一个万能的雕虫小技:

data(){
    return {
        idStore: new WeakMap(),
        idSeed: 0
    }
},
filters: {
    allocId(item){
        const { idStore } = this;
        const curId = idStore.get(item);
        if(curId) return curId;
        const nextId = ++ this.idSeed;
        idStore.set(item, nextId);
        return nextId
    }
}
<li v-for="i in list" :key="i|allocId"></li>

这样就能自动识别对象,为之分配唯一的 ID。
不过更好的方案是拿到数据之后预处理一遍,给每项分配一个 ID。

你知道吗?

宣传栏