Vue.js中避免Select2多选下拉框出现重复选项问题

问题根源 #

你的代码直接循环hosts.host_mapping生成<option>，但同一host_group会对应多个host_name，导致生成大量重复选项。Select2会将这些重复选项视为独立条目，选中时就会重复添加到绑定的数组中。

解决方案 #

1. 渲染唯一的选项列表

先对符合条件的host_group去重，避免生成重复<option>，通过Vue计算属性实现：

// 在组件的computed中添加
computed: {
  uniqueHostGroups() {
    // 过滤当前item包含的host对应的group，再去重
    const matchedGroups = this.hosts.host_mapping
      .filter(opt => this.item.hosts.includes(opt.host_name))
      .map(opt => opt.host_group);
    // 利用Set去重后转回数组
    return [...new Set(matchedGroups)];
  }
}

修改模板，循环去重后的列表：

<select style="width: 100%" multiple v-model="item.host_groups" v-select2 class="form-control select2" :id="'tmp_hostgroup_'+index">
  <option v-for="group in uniqueHostGroups" :value="group" :key="group">{{ group }}</option>
</select>

2. 确保选中值自动去重（可选）

为彻底避免重复值，监听绑定数组的变化，自动去重：

// 在组件的watch中添加
watch: {
  'item.host_groups'(newVal) {
    this.item.host_groups = [...new Set(newVal)];
  }
}

或者使用带get/set的计算属性替代直接绑定：

computed: {
  filteredHostGroups: {
    get() {
      return [...new Set(this.item.host_groups)];
    },
    set(val) {
      this.item.host_groups = [...new Set(val)];
    }
  }
}

模板中修改v-model：

v-model="filteredHostGroups"

3. 修复Vue的key绑定

原代码中v-for的key绑定option.host_group，当存在重复选项时key会重复，违反Vue渲染规则。使用去重后的列表后，group作为key天然唯一，解决了这个问题。

额外说明 #

你的Select2指令配置没有问题，重复选项的核心原因是重复的<option>标签，解决选项唯一性后即可彻底解决问题。

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