Vue3技术问题：勾选复选框时输入框值无法同步清空

问题场景 #

表单包含文本输入框和复选框，需求如下：

• 用户勾选复选框时，输入框需清空且复选框保持勾选状态
• 复选框已勾选时，用户在输入框开始输入需自动取消复选框勾选

当前问题：勾选复选框后，Vue Devtools显示输入框值已设为null，但浏览器输入框仍显示原有内容；同时缺失输入时取消复选框的反向联动逻辑。该功能在Vue2中正常，升级到Vue3后出现异常。

问题原因 #

1. 响应式追踪失效：使用markRaw(ref(new Form(...)))将Form实例标记为非响应式对象，Vue3无法追踪其属性变化，导致数据更新后视图不刷新。
2. 联动逻辑不完整：仅实现了勾选复选框清空输入的单向逻辑，未处理输入时取消复选框的反向逻辑。
3. 子组件绑定冗余：InputText组件中声明了多余的value prop，与defineModel的双向绑定逻辑冲突。

解决方案 #

1. 修复响应式追踪 #

移除markRaw，改用reactive包裹Form实例，确保属性变化被Vue3响应式系统追踪。

2. 补全双向联动逻辑 #

添加对输入框值的监听，实现输入时自动取消复选框勾选的逻辑。

3. 优化子组件绑定 #

移除InputText组件中冗余的value prop，利用defineModel原生的双向绑定能力。

修改后的代码 #

Form.vue #

<template xmlns="http://www.w3.org/1999/html">
    <div>
        <InputText
            name="answer_input"
            v-model="formRef.answer_input"
            :required="!formRef.answer_input_dont_know"
        >
            <template v-slot:question>
                {{ question }}
            </template>

            <template v-slot:input>
                <div class="form-group">Or</div>
                <input
                    type="checkbox"
                    id="answer_input_dont_know"
                    v-model="formRef.answer_input_dont_know"
                />
                <label for="answer_input_dont_know" class="m-0 ml-2">
                    {{ label }}
                </label>
            </template>
        </InputText>
    </div>
</template>

<script setup>
import InputText from "../Form/InputText";
import Form from "../../Form";
import { reactive, defineExpose, watch } from "vue";

const props = defineProps({
    formData: Object
})

// 使用reactive确保Form实例属性可被响应式追踪
let formRef = reactive(new Form({
    answer_input: null,
    answer_input_dont_know: false,
}, props.formData))

// 勾选复选框时清空输入框
watch(() => formRef.answer_input_dont_know, (newVal) => {
    if (newVal) {
        formRef.answer_input = null;
    }
})

// 输入框有内容时取消复选框勾选
watch(() => formRef.answer_input, (newVal) => {
    if (newVal !== null && newVal.trim() !== '' && formRef.answer_input_dont_know) {
        formRef.answer_input_dont_know = false;
    }
})

defineExpose({
    formRef
})
</script>

InputText.vue #

<template>
    <p v-if="$slots.question" class="input__question">
      <slot name="question"></slot>
    </p>

    <div class="form-group">
        <input
          :name="name"
          type="text"
          class="form-control"
          v-model="model"
          :required="required"
        />
    </div>

    <slot name="input"></slot>
</template>

<script setup>
const props = defineProps({
  name: String,
  required: Boolean
})
// 利用defineModel原生双向绑定能力，无需额外声明value prop
const model = defineModel()
</script>

说明 #

• reactive包裹Form实例后，Vue3能正确追踪其属性变化，解决数据更新后视图不刷新的问题。
• 新增的输入框监听逻辑补全了双向联动，满足需求中输入时取消复选框的要求。
• 移除InputText的value prop后，defineModel能更简洁地处理双向绑定，避免逻辑冲突。

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