Vue Multiselect从组件外部修改选中值异常问题求助

问题描述 #

使用Vue.js v2.6.14和vue-multiselect v2.1.6时，点击同级复选框想要将multiselect的选中值切换为name为"United Arab Emirates"的选项，但实际结果是直接修改了当前选中元素的name属性，并未正确切换选中项。

原因分析 #

你的residence初始值是一个独立创建的对象，并非residenceOptions数组内元素的引用。当你直接执行residence.name = "United Arab Emirates"时，只是修改了这个独立对象的属性，并没有将residence替换为数组中对应的选项对象。而vue-multiselect是通过对比对象引用来识别选中项的，所以组件不会认为你切换了选项，只会更新当前选中项的显示内容。

解决方案 #

1. 初始化时绑定数组内的引用对象

修改data中的residence初始化逻辑，直接引用residenceOptions中的元素：

components: {
  Multiselect
},
data() {
  return {
    // 直接取数组第一个元素作为初始值，保证是数组内的引用
    residence: this.residenceOptions[0],
    residenceOptions: [
      { name: 'Not selected' },
      { name: 'Albania' },
      { name: 'Algeria' },
      // ...其他选项
      { name: 'United Arab Emirates'}
    ]
  }
}

2. 复选框点击时替换为目标选项对象

不要直接修改name属性，而是找到residenceOptions中对应的选项对象，替换residence的值：

<multiselect
 v-model='residence'
 :options='residenceOptions'
 label='name'
 placeholder='Residence'
 track-by='name'>
    <template slot='singleLabel' slot-scope='{ option }'>
       <strong>{{ option.name }}</strong>
    </template>
</multiselect>

<div class='form__checkbox'>
 <input
  id='quotationForm-resident'
  class='form__input'
  name='residence'
  type='checkbox'
  :checked='residence.name === "United Arab Emirates"'
  @click='toggleResidence'
/>
</div>

添加对应的方法：

methods: {
  toggleResidence() {
    // 找到目标选项对象
    const uaeOption = this.residenceOptions.find(opt => opt.name === "United Arab Emirates");
    // 切换选中项：如果当前是阿联酋则切回默认，否则设为阿联酋
    this.residence = this.residence.name === "United Arab Emirates" 
      ? this.residenceOptions[0] 
      : uaeOption;
  }
}

关键说明 #

vue-multiselect的v-model需要绑定到options数组中的引用对象，组件通过对象引用来判断选中项。直接修改对象属性只会改变当前对象的内容，无法触发组件的选中项切换逻辑，必须替换整个对象引用才能让组件正确识别选中项变化。

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