Vue子组件v-model重置失效问题排查

父组件问题：响应式引用断裂 #

你在clearUI方法里直接将formData重新赋值为新的reactive对象，这会导致原来的响应式引用断裂——子组件绑定的是旧的formData对象，新对象的更新无法同步到子组件中。

修复代码： #

不要替换整个对象，而是用Object.assign将初始值覆盖到现有响应式对象上：

<script setup>
const initialFormData = {
    productCount: null,
    firstname: '',
    surname: '',
    phone: '',
    email: '',
    postcode: '',
    submittedOnce: false,
    errors: []
}

const formData = reactive({ ...initialFormData });

const clearUI = () => {
    // 用Object.assign重置现有响应式对象的属性，而非替换整个对象
    Object.assign(formData, initialFormData);
    triggerInlineForm.value = false;
}
</script>

子组件问题：未同步props变化+配置矛盾 #

1. 未监听props更新，子组件内部值不同步 #

子组件里的value通过ref(props.modelValue)初始化，但props更新时，这个ref不会自动同步，所以父组件重置formData.productCount后，子组件的value仍保留旧值。

2. modelValue的类型与配置冲突 #

• modelValue设为required: true却又配置default，这是无效的（required优先级高于default）；
• 类型定义为String但默认值是数字0，类型不匹配，计数场景建议用Number类型。

3. 未实现绑定的resetCount方法 #

模板中绑定了@reset-counts="resetCount"事件，但script里未定义该方法，无法响应重置触发。

修复代码： #

<template>
    <div class="form__row" @reset-counts="resetCount">
        <div class="counter__row">
            <label>{{ label }}</label>
            <div class="form__counter">
                <button class="form__button--decrease form__button--circle form__button--animate-scale" :disabled="value === 0 || props.disabled" @click.prevent="decreaseCount()">
                    <i>
                        <FontAwesomeIcon :icon="['fal', 'minus']" />
                    </i>
                </button>
                <!-- 用type="number"和.number修饰符确保值为数字类型，v-model已包含input事件，无需额外绑定 -->
                <input type="number" v-model.number="value" :disabled="props.disabled" placeholder="0"/>
                <button class="form__button--increase form__button--circle form__button--animate-scale" :disabled="props.disabled" @click.prevent="increaseCount()">
                    <i>
                        <FontAwesomeIcon :icon="['fal', 'plus']" />
                    </i>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

const emits = defineEmits(['update:modelValue', 'resetCounts']);

const props = defineProps({
    label: {
        type: String,
        required: true
    },
    modelValue: {
        type: Number, // 计数场景用Number更合理
        required: false,
        default: 0
    },
    disabled: {
        type: Boolean,
        default: false
    }
});

const value = ref(props.modelValue);

// 监听props.modelValue变化，同步更新子组件内部值
watch(() => props.modelValue, (newVal) => {
    value.value = newVal ?? 0; // 处理null值，转为0
});

const increaseCount = () => {
    value.value++
    emits('update:modelValue', value.value)
}

const decreaseCount = () => {
    if (value.value > 0) { // 避免计数变为负数
        value.value--;
        emits('update:modelValue', value.value)
    }
}

// 实现resetCount方法，重置计数
const resetCount = () => {
    value.value = props.modelValue ?? 0;
    emits('update:modelValue', value.value);
}
</script>

额外优化： #

• 输入框改为type="number"并添加.number修饰符，确保输入值为数字；
• 给减号按钮增加判断，避免计数变为负数；
• 给disabled设置默认值false，避免未传入时的undefined问题。

可选：主动触发子组件重置 #

父组件在clearUI中可主动调用子组件的重置方法，确保同步：

<template>
    <ProductCounter ref="counterRef" v-model="formData.productCount" label="product count" />
</template>

<script setup>
import { reactive, ref } from 'vue';

const counterRef = ref(null);
const formData = reactive({ ...initialFormData });

const clearUI = () => {
    Object.assign(formData, initialFormData);
    // 主动触发子组件重置
    counterRef.value?.resetCount();
    triggerInlineForm.value = false;
}
</script>

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