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

  • Z时代
  • 2024-02-22
  • 分类：IT

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

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

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

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

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

<ul>
  <li v-for="i in list" :key="i.id"></li>
</ul>

回答：

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

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

以上是 Vue，前端动态生成的列表，在生成的时候应该用什么作为key呢？ 的全部内容， 来源链接： utcz.com/p/936112.html

回到顶部