Vue.js联动表单响应异常：值归零后无法恢复初始状态

问题根源 #

1. DOM销毁导致绑定失效：第三个表单用v-if="value2 === 3"控制显示，当value2变为0时，表单会被完全销毁，value3的v-model绑定随之消失。后续value2再次变回3时，表单重建可能出现视图与数据不同步的情况。
2. watch依赖链断裂：原逻辑通过value1的watch修改value2，再靠value2的watch修改value3。当value1归0时，value2变为0触发的watch清空value3操作，因表单已销毁无法作用到DOM，导致后续状态异常。
3. 数字输入类型异常：type="number"的输入框在输入0或清空时，v-model可能将值转为空字符串，导致value1 === 0的判断失效。

修复后的代码 #

<template>
    <div>
        <h1>三个表单联动练习</h1>
        <form>
            <div class="aligned-left">
                <label for="value1">value1</label>
                <input type="number" id="value1" placeholder="value1" v-model.number="value1" />
            </div>
        </form>
        <form>
            <div class="aligned-left">
                <label for="value2">value1变化时value2设为3，value1为0时value2归0</label>
                <input type="number" id="value2" placeholder="value2" v-model.number="value2" />
            </div>
        </form>
        <form v-if="value2 === 3">
            <div class="aligned-left">
                <label for="value3">仅当value2等于3时显示</label>
                <input type="text" id="value3" placeholder="value3" v-model="value3" />
            </div>
        </form>
    </div>
</template>

<script>
export default {
    name: 'form-example',
    data() {
        return {
            value1: 0,
            value2: 0,
            value3: ''
        }
    },
    watch: {
        value1(newVal) {
            if (newVal !== 0) {
                this.value2 = 3;
                this.value3 = `value 2 has value equal ${this.value2}`;
            } else {
                this.value2 = 0;
                this.value3 = '';
            }
        },
        value2(newVal) {
            if (newVal === 3) {
                this.value3 = `value 2 has value equal ${newVal}`;
            } else if (newVal === 0) {
                this.value3 = '';
            }
        }
    }
}
</script>

<style scoped>
.aligned-left {
  text-align: left;
}
</style>

关键修改点 #

• 添加.number修饰符：确保输入框的值始终为数字类型，避免空字符串导致的判断错误。
• 简化状态重置逻辑：value1归0时直接重置value2和value3，跳过依赖链，保证状态同步。
• 补充手动修改处理：保留value2的watch，处理用户手动修改value2的场景，完善联动逻辑。
• 保留DOM控制逻辑：继续用v-if控制第三个表单显示，通过直接重置value3确保表单重建时数据正确。

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