Vue3.2 Composition API实现复选框组内两选项互斥选中

你完全可以通过watch监听或者computed的getter/setter来实现four和six两个复选框的互斥逻辑，不需要在schema中额外添加v-model（FormKit已经通过name和data的字段完成了双向绑定），以下是两种具体实现方式：

方案一：使用watch监听状态变化 #

这种方式直观易懂，直接监听两个复选框的状态，当其中一个被选中时自动取消另一个：

import { ref, watch } from 'vue';

const schema = [
    { $formkit: "checkbox", name: "one", label: "One" },
    { $formkit: "checkbox", name: "two", label: "Two" },
    { $formkit: "checkbox", name: "three", label: "Three" },
    { $formkit: "checkbox", name: "four", label: "Four" },
    { $formkit: "checkbox", name: "five", label: "Five" },
    { $formkit: "checkbox", name: "six", label: "Six" },
    { $formkit: "checkbox", name: "seven", label: "Seven" }
];

const data = ref({
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
    seven: false
});

// 监听four的选中状态
watch(() => data.value.four, (isChecked) => {
    if (isChecked) {
        data.value.six = false;
    }
});

// 监听six的选中状态
watch(() => data.value.six, (isChecked) => {
    if (isChecked) {
        data.value.four = false;
    }
});

方案二：使用computed封装互斥逻辑 #

如果希望把互斥逻辑统一封装，避免分散的watch，可以用computed的getter和setter来代理数据修改：

import { ref, computed } from 'vue';

const schema = [
    // 原schema内容不变
];

// 存储原始状态
const rawData = ref({
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
    seven: false
});

// 用computed代理数据，处理互斥逻辑
const data = computed({
    get() {
        return rawData.value;
    },
    set(newValues) {
        // 强制互斥：选中four则取消six，选中six则取消four
        if (newValues.four) {
            newValues.six = false;
        }
        if (newValues.six) {
            newValues.four = false;
        }
        // 合并更新原始数据
        rawData.value = { ...rawData.value, ...newValues };
    }
});

注意事项 #

• FormKit的FormKitSchema已经通过:data="data"和响应式数据完成了双向绑定，每个checkbox的name属性对应data中的字段，相当于已经实现了v-model的效果，不需要额外在schema中配置v-model。
• 两种方案都能满足"单一选中或均不选中"的需求，watch更适合简单场景，computed则更适合需要集中管理状态逻辑的场景。

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