Vue3自定义checkbox组件绑定v-model后选中项逐字符显示异常问题

问题原因 #

出现已选项拆分为单个字符的核心原因是自定义Checkbox组件的v-model绑定逻辑错误，导致原本应该存储选项字符串的数组被错误赋值为字符串类型：当你用v-for遍历字符串时，会自动按单个字符拆分迭代，就会出现你看到的现象。

修复方案 #

1. 自定义Checkbox组件实现规范 #

以Vue3为例（Vue2仅需替换prop和emit名称即可），组件需要正确接收数组类型的绑定值、当前选项的标签值，选中时返回更新后的完整数组：

<!-- components/CustomCheckbox.vue -->
<template>
  <label class="custom-checkbox">
    <input
      type="checkbox"
      :checked="modelValue.includes(label)"
      @change="handleChange"
    >
    <span class="checkbox-label">{{ label }}</span>
  </label>
</template>

<script>
export default {
  name: 'CustomCheckbox',
  props: {
    // v-model绑定的已选数组
    modelValue: {
      type: Array,
      default: () => []
    },
    // 当前选项的完整值
    label: {
      type: String,
      required: true
    }
  },
  emits: ['update:modelValue'],
  methods: {
    handleChange(e) {
      const isChecked = e.target.checked
      const updatedList = [...this.modelValue]
      if (isChecked) {
        // 勾选时加入完整标签
        updatedList.push(this.label)
      } else {
        // 取消勾选时移除对应标签
        const index = updatedList.findIndex(item => item === this.label)
        if (index > -1) updatedList.splice(index, 1)
      }
      // 返回完整数组给父组件更新绑定值
      this.$emit('update:modelValue', updatedList)
    }
  }
}
</script>

如果是Vue2版本，把modelValue改为value，emit的事件名从update:modelValue改为input即可。

2. 父组件调用示例 #

父组件绑定的已选变量必须初始化数组类型，不要使用字符串类型：

<!-- 父组件 -->
<template>
  <div class="filter-container">
    <div class="available-section">
      <h4>可选项</h4>
      <CustomCheckbox
        v-for="option in optionList"
        :key="option"
        :label="option"
        v-model="selectedOptions"
      />
    </div>
    <div class="selected-section">
      <h4>已选项</h4>
      <div v-for="item in selectedOptions" :key="item" class="selected-item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import CustomCheckbox from './components/CustomCheckbox.vue'
export default {
  components: { CustomCheckbox },
  data() {
    return {
      // 可选项列表
      optionList: ['第一项', '第二项', '第三项'],
      // 必须初始化为数组类型
      selectedOptions: []
    }
  }
}
</script>

避坑提示 #

不要在自定义Checkbox组件内部直接修改modelValue/value prop，所有值变更都要通过emit事件通知父组件更新，避免数据流混乱。

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