Vue自定义多选框组件异常：无法收集选中项为数组仅保留最后值

你的问题出在自定义多选框组件的事件处理逻辑上——每次勾选时你直接把单个选项值emit给父组件，导致父组件的数组状态被替换成了单个字符串，而不是维护一个包含所有选中项的数组。

修改后的自定义多选框组件代码： #

<script setup>
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const handleCheckboxChange = (option) => {
  // 基于当前选中状态创建新数组，保证响应式
  let newValue = [...props.modelValue]
  if (newValue.includes(option)) {
    // 如果已选中，移除该项
    newValue = newValue.filter(item => item !== option)
  } else {
    // 如果未选中，添加该项
    newValue.push(option)
  }
  emit('update:modelValue', newValue)
}
</script>

<template>
  <div v-for="option in options" :key="option">
    <input
      type="checkbox"
      :id="option"
      :value="option"
      :checked="modelValue.includes(option)"
      @change="handleCheckboxChange(option)"
    >
    <label :for="option">{{ option }}</label>
  </div>
</template>

关键修改点说明： #

• 绑定checked属性：通过modelValue.includes(option)判断当前选项是否被选中，确保视图和状态同步，解决勾选后不显示选中样式的问题。
• 重构事件处理逻辑：不再直接emit单个值，而是基于当前的modelValue数组，判断选项是否已存在，执行添加或移除操作，最终emit更新后的数组。
• 使用新数组保证响应式：用扩展运算符[...props.modelValue]创建原数组的副本，避免直接修改props（Vue中props是只读的），同时确保数组的响应式更新。

父组件的代码无需修改，保持原样即可。修改后，勾选多个选项时，user.contactPreference会正确维护所有选中项的数组，不会再被单个值覆盖。

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