VueJS自定义checkbox组件点击无法选中的问题咨询

同时给input[type=checkbox]绑定v-model="checked"和自定义@click="toggleCheckbox"会导致状态逻辑冲突：

• Vue的v-model默认会在checkbox触发点击/change事件时，自动切换绑定的响应式变量值
• 自定义的toggleCheckbox方法又额外手动反转了一次checked值
  每次点击时值会被连续反转两次，最终回到初始状态，因此功能表现为完全不生效。手动给checked赋值为true时没有触发双次反转逻辑，因此自定义勾选标记可以正常展示。

• 模板中使用了inputShape变量，但script块中未声明该变量，会触发运行时报错
• 类名绑定中使用的text-${props.textSize}属于Tailwind动态拼接类名写法，Tailwind在编译阶段静态扫描类名，无法识别运行时拼接生成的类，会导致自定义文字大小样式失效
• 内部勾选标记div同时绑定了v-if="checked"和!props.isToggled && 'hidden'，当isToggled为false时，即使处于选中状态勾选标记也会被隐藏，存在逻辑冲突

直接删除自定义的toggleCheckbox方法和对应的@click绑定，使用v-model自带的状态切换能力即可，修复后的核心代码如下：

<template>
    <div
        class="cursor-pointer"
        :class="[
            'flex relative items-center h-full w-full p-2',
            props.isEnabled || `opacity-30`,
            props.checkBoxType === 'reverse-between' ? 'justify-between' : 'justify-start',
            props.direction === 'vertical' ? 'flex-col justify-start gap-2' : 'items-center',
        ]"
    >
        <input
            type="checkbox"
            v-model="checked"
            class="absolute order-1 w-8 h-8 opacity-0"
            :class="[
                props.checkBoxType === 'reverse-between' && ' right-0',
                props.checkBoxType === 'standard' ? 'order-0' : 'order-1',
                props.direction === 'vertical' && 'top-0 right-4',
            ]"
            :disabled="!props.isEnabled"
        />
        <div
            :class="[
                'bg-white w-6 h-6 flex flex-shrink-0 justify-center items-center p-1 border-2 border-gray',
                props.checkBoxType === 'standard' && props.direction === 'horizontal' && 'order-0 mr-2',
                props.checkBoxType === 'reverse-between' && props.direction === 'horizontal' && 'order-1 ml-2',
                props.direction === 'vertical' && 'mr-0',
                inputShape === 'square' ? 'rounded' : 'rounded-full',
                !props.isToggled && 'border-1',
            ]"
        >
            <div
                v-if="checked && props.isToggled"
                :class="[
                    'bg-gray w-3 h-3',
                    props.inputShape === 'circle' ? 'rounded-full' : 'rounded-sm',
                ]"
            ></div>
        </div>
        <div
            :class="[
                'select-none font-base flex justify-center items-center',
                props.checkBoxType === 'standard' ? 'order-1' : 'order-0',
                props.direction === 'vertical' && 'text-center',
            ]"
        >
            <span
                :class="[
                    props.textSize ? textSizeClass : 'text-base',
                    props.isToggled ? 'font-bold' : 'font-normal',
                    'text-gray',
                ]"
                >{{ props.label }}</span
            >
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, computed } from "vue"

const props = defineProps({
    isEnabled: { type: Boolean, default: true },
    checkBoxType: { type: String, default: 'standard' },
    direction: { type: String, default: 'horizontal' },
    inputShape: { type: String, default: 'square' },
    isToggled: { type: Boolean, default: true },
    textSize: { type: String, default: '' },
    label: { type: String, default: '' }
})

const checked = ref(false)
// 预映射Tailwind文字大小类，规避动态拼接类名失效问题
const textSizeClass = computed(() => {
    const sizeMap: Record<string, string> = {
        'xs': 'text-xs',
        'sm': 'text-sm',
        'base': 'text-base',
        'lg': 'text-lg',
        'xl': 'text-xl'
    }
    return sizeMap[props.textSize] || 'text-base'
})
</script>

如果需要在选中状态切换时追加业务逻辑，不要同时使用v-model和手动值反转，两种合规写法二选一：

• 保留v-model，通过@change事件监听状态变化，在事件回调中直接读取更新后的checked.value执行自定义逻辑，不要手动修改值
• 移除v-model，手动给input绑定:checked="checked"属性和@change="toggleCheckbox"事件，在事件方法中执行值反转和自定义逻辑

示例写法：

<input
    type="checkbox"
    v-model="checked"
    @change="handleCheckChange"
/>

<script setup>
const checked = ref(false)
const handleCheckChange = () => {
    // 直接使用更新后的checked值执行业务逻辑即可
    console.log('当前选中状态：', checked.value)
}
</script>

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