Vue中如何避免复选框v-model绑定值变为true/false

你直接用v-model绑定filteredHeaders[index]时，原生复选框的默认行为会将选中状态转换为布尔值（true/false），覆盖掉原来的对象值，所以重新选中时数组里就变成了布尔值而非目标对象。

我们需要调整绑定逻辑：用数组存储选中的对象本身，通过复选框的选中状态来维护这个数组，而不是直接绑定到原数组的索引位置。

修改后的代码 #

Template部分 #

<template>
    <v-card>
        <v-card-title>
            <span class="headline">Filter Headers</span>
        </v-card-title>
        <v-card-text>
            <div class="column" v-for="(header, index) in allHeaders" :key="index">
                <input
                  type="checkbox"
                  :id="index"
                  :value="header"
                  v-model="filteredHeaders"
                >
                <label :for="index">{{ header.text }}</label>
            </div>
            <p class="ml-5 mt-10"> {{ filteredHeaders }} </p>
        </v-card-text>
    </v-card>    
</template>

Script部分 #

<script>
export default {
    props: {
        headers: Array,
        allHeaders: Array,
    },
    computed: {
        updatedTitleOnly() {
            // 直接从选中的对象里提取text即可
            return this.filteredHeaders.map(item => item.text);
        }
    },
    data() {
        return {
            // 深拷贝props的headers，避免直接修改原props
            filteredHeaders: JSON.parse(JSON.stringify(this.headers)),
        }
    },
};
</script>

<style>
.column {
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px;
}
</style>

关键改动说明 #

• 给复选框添加:value="header"，指定选中时要存入数组的对象
• v-model直接绑定到filteredHeaders数组，Vue会自动处理：选中时将header对象加入数组，取消时从数组中移除
• 初始化filteredHeaders时做深拷贝，避免修改父组件传入的headers props（Vue禁止直接修改props）
• updatedTitleOnly计算属性简化为map方法，直接提取选中对象的text属性

另一种手动维护的方式（如果需要更精细的控制） #

如果不想依赖Vue自动处理数组，也可以手动通过@change事件维护：

<input
  type="checkbox"
  :id="index"
  :checked="filteredHeaders.includes(header)"
  @change="handleHeaderToggle(header)"
>

然后在methods里添加：

methods: {
    handleHeaderToggle(header) {
        const index = this.filteredHeaders.findIndex(item => item.text === header.text); // 假设text是唯一标识
        if (index > -1) {
            this.filteredHeaders.splice(index, 1);
        } else {
            this.filteredHeaders.push(JSON.parse(JSON.stringify(header)));
        }
    }
}

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