Vue2+Vue Bootstrap多选双列表框多属性选项移动问题

问题根因 #

1. 原生多选select的value属性仅返回首个选中项的序列化字符串，无法拿到完整的选中对象列表；且你在option上硬编码了value为字符串模板，没有绑定真实的item数据对象，拿到的值不符合预期
2. indexOf对引用类型的查找基于内存地址，你拿到的字符串和数组内的对象引用不匹配，永远返回-1，删除逻辑完全失效

第一步：修改HTML模板（替换原有列表代码） #

放弃直接操作DOM获取选中值，改用Vue数据驱动的v-model绑定选中项，同时正确绑定option的值：

<b-row class="my-1">
    <b-col cols="5">
        <select size="30" class="form-control" id="list1" multiple v-model="selectedList1">
            <option v-for="item1 in list1" v-bind:key="item1.id" :value="item1">{{item1.text}}</option>
        </select>
    </b-col>
    <b-col cols="2">
        <b-col lg="4"  class="pb-2">
            <b-button class="primary" block  variant="primary" size="sm" @click="allToRight">&raquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="someToRight">&rsaquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="someToLeft">&lsaquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="allToLeft">&laquo;</b-button>
        </b-col>
    </b-col>
    <b-col cols="5">
        <select size="30" class="form-control" id="list2" multiple v-model="selectedList2">
            <option v-for="item2 in list2" v-bind:key="item2.id" :value="item2">{{item2.text}}</option>
        </select>
    </b-col>
</b-row>

第二步：修改JS逻辑 #

首先在组件的data中新增两个选中项存储变量：

data() {
  return {
    // 原有其他变量...
    selectedList1: [], // 存储list1的选中项
    selectedList2: []  // 存储list2的选中项
  }
}

替换原有someToRight、someToLeft方法：

someToRight: function() {
  // 遍历所有选中项，逐个移动
  this.selectedList1.forEach(item => {
    // 用唯一id匹配查找索引，兼容性更强
    const index = this.list1.findIndex(i => i.id === item.id)
    if (index > -1) {
      this.list1.splice(index, 1)
      this.list2.push(item)
    }
  })
  // 清空选中状态
  this.selectedList1 = []
},
someToLeft: function() {
  this.selectedList2.forEach(item => {
    const index = this.list2.findIndex(i => i.id === item.id)
    if (index > -1) {
      this.list2.splice(index, 1)
      this.list1.push(item)
    }
  })
  this.selectedList2 = []
}

可选优化（全量移动方法也可统一逻辑，更易维护） #

allToRight: function() {
  this.list2.push(...this.list1)
  this.list1 = []
},
allToLeft: function() {
  this.list1.push(...this.list2)
  this.list2 = []
}

内容的提问来源于stack exchange，提问作者ccsv