js 切换数据源的时候该缓存checkbox选中结果并回显？

Question

需求说明：
1.台风列表切换年份的时候，实时调接口获取数据渲染checkbox
2.选中的台风要在左上侧展示出来对应的数据

遇到的问题：
如果checkbox 绑定的是循环的对象的话无法回显已选中的checkbox，所以目前name绑定的是台风的id，这样做能够正常正常回显，但是问题就是 选中的时候只能拿到选中的id，由于展示以及其他后续的操作要拿到对应的对象，所以不知道是自己钻牛角尖还是什么，导致上面的展示不对

checkbox代码

 <van-checkbox-group v-model="result" @change="changeTy" :max="4">
                  <van-checkbox style="margin: 30px 0" v-for="(item, index) in tyList" :name="item.TYPHOON_ID"
                    :key="index">{{
                        item.TYPHOON_ID
                    }} {{ item.CHN_NAME }}
                    {{ item.ENG_NAME }}</van-checkbox>

                </van-checkbox-group>

 //选中台风
    async changeTy(val) {
      //缓存选中台风
      if (this.ids.length == 0) {
        this.selectId = this.tyList.filter((x) => val.includes(x.TYPHOON_ID));
        this.ids = this.ids.concat(this.selectId);
      } else {
        this.selectId = this.tyList.filter((x) => val.includes(x.TYPHOON_ID));
        this.ids = this.ids.concat(this.selectId);
        this.selectId = this.selectId.concat(this.ids)
      }
      //去重
      let set = new Set(this.selectId);
      this.selectId = Array.from(set);
    
      await this.$store.dispatch("mapTyphoon/getSelected", this.selectId);
      
    },

changeTy 方面目前是在选中的时候 暂存下选中的对象 然后去重之后，再进行其他操作，左上角的操作直接绑定的this.selectId 但是目前取消选中的时候没有办法判断，不知道该怎么从selectId中取消掉，求教方法该怎么优化

 <list :data="selectId" v-if="selectId.length" @getPath="getPath"></list>

Answer 1

可以定义一个 id 到 item 的映射

const id2Item = {}

切换列表时添加映射

this.tyList.forEach(item => id2Item[item.TYPHOON_ID] = item)

定义一个 computed 属性

checked: vm => vm.result.map(id => id2Item[id])

直接使用即可

 <list :data="checked" v-if="checked.length" @getPath="getPath"></list>

Answer 2

对于列表不应该使用index绑定key，应该使用id这些唯一的属性

列表渲染