Vue-MultiSelect复选框绑定异常：点击无法勾选且数据未更新

嘿，我看到你遇到了Vue-Multiselect自定义多选选项时，复选框点击后不显示勾选状态的问题。这是因为你当前的实现里，组件的选中状态（value数组）和自定义的checked属性没有做好双向同步，而且复选框的事件绑定逻辑也有点问题。

问题分析 #

你的代码里，虽然在onSelect和onRemove方法中修改了option.checked，但：

• 当直接点击复选框时，并没有触发组件的select/remove事件，导致checked属性变更后，组件的value数组没同步，反过来也会让复选框状态和实际选中状态脱节
• Vue-Multiselect内部对选项的处理可能导致你修改的option引用和组件内部的不一致，从而状态更新不生效

修复方案 #

我们需要让value数组（组件的选中状态）和checked属性完全同步，同时确保复选框的点击能正确触发选中/取消逻辑。以下是修改后的完整代码：

模板部分

<div id="app">
  <multiselect 
    select-Label="" 
    selected-Label="" 
    deselect-Label="" 
    v-model="value" 
    :options="options" 
    :multiple="true" 
    track-by="library" 
    :custom-label="customLabel" 
    :close-on-select="false"
  >
    <span class="checkbox-label" slot="option" slot-scope="scope">
      {{ scope.option.library }}
      <input 
        class="test" 
        type="checkbox" 
        :checked="scope.option.checked" 
        @change="toggleOption(scope.option)" 
        @focus.prevent
      />
    </span>
  </multiselect>
  <pre>{{ value }}</pre>
</div>

JS部分

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: [],
    options: [
      { language: 'JavaScript', library: 'Vue.js', checked: false },
      { language: 'JavaScript', library: 'Vue-Multiselect', checked: false },
      { language: 'JavaScript', library: 'Vuelidate', checked: false }
    ]
  },
  watch: {
    // 监听value变化，同步所有选项的checked状态
    value(newSelected) {
      // 先重置所有选项的checked为false
      this.options.forEach(opt => opt.checked = false);
      // 把选中的选项设为checked=true
      newSelected.forEach(selectedOpt => {
        const match = this.options.find(opt => opt.library === selectedOpt.library);
        if (match) match.checked = true;
      });
    }
  },
  methods: {
    customLabel(option) {
      return `${option.library} - ${option.language}`;
    },
    // 处理复选框的切换逻辑
    toggleOption(option) {
      const isChecked = !option.checked;
      option.checked = isChecked;
      
      if (isChecked) {
        // 如果选项未被选中，添加到value数组
        const isAlreadySelected = this.value.some(item => item.library === option.library);
        if (!isAlreadySelected) {
          this.value.push(option);
        }
      } else {
        // 如果选项已被选中，从value数组移除
        this.value = this.value.filter(item => item.library !== option.library);
      }
    }
  }
}).$mount('#app');

关键修改点 #

• 移除了自定义slot里的@click.self，改用复选框的@change事件来处理状态切换，确保点击复选框时直接触发选中/取消逻辑
• 复选框不再用v-model绑定，而是用:checked绑定scope.option.checked，避免和组件内部状态冲突
• 添加了watch监听value数组的变化，确保无论用户是点击复选框还是点击选项文字，checked状态都能和组件选中状态保持一致
• 移除了原来的onSelect和onRemove方法，因为toggleOption和watch已经覆盖了所有状态同步的场景

这样修改后，点击复选框就会正确显示勾选状态，同时value数组也会同步更新，完美解决你的问题！

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