Vue3中按钮点击重置v-model失效，求排查错误原因

问题场景 #

用户的Vue3组件代码如下：

<template>
    <input id="high" type="number" v-model="high" />
    <button @click.prevent="resetFunc('high')">X</button>
</template>

<script setup>
    const high = ref(0)

    const resetFunc = (refVar) => {
        refVar.value = ''
    }
</script>

点击按钮调用resetFunc后，输入框的值无法被重置，问题出在哪里？

错误原因 #

• 传递参数错误：按钮调用时传入的是字符串'high'，而不是high这个ref对象本身。函数里的refVar是字符串类型，没有.value属性，赋值操作自然无效。
• 类型不匹配：输入框是type="number"，v-model绑定的是数字类型的ref（初始值为0），但尝试赋值为空字符串''，Vue会因为类型不兼容忽略这个赋值操作。

解决方法 #

方法一：直接传递ref对象 #

修改按钮的调用方式，直接传入high这个ref对象，同时给数字类型的v-model赋合法的重置值（比如0或者null，null会让数字输入框显示为空）：

<template>
    <input id="high" type="number" v-model="high" />
    <button @click.prevent="resetFunc(high)">X</button>
</template>

<script setup>
    const high = ref(0)

    const resetFunc = (refVar) => {
        // 重置为0，或者用null让输入框显示为空
        refVar.value = null
    }
</script>

方法二：通过对象管理ref（支持按名称调用） #

如果需要通过字符串名称来重置，可以把所有需要重置的ref放到一个统一的对象中，通过对象的键名来访问对应的ref：

<template>
    <input id="high" type="number" v-model="form.high" />
    <button @click.prevent="resetFunc('high')">X</button>
</template>

<script setup>
    import { ref } from 'vue'
    // 用对象管理需要重置的ref
    const form = {
        high: ref(0)
    }

    const resetFunc = (refName) => {
        // 根据键名获取ref并重置
        form[refName].value = null
    }
</script>

额外说明 #

对于type="number"的输入框，v-model的合法值包括：

• 数字类型（如0、100）
• null（会让输入框显示为空）
• 空字符串''会被Vue自动忽略，因此无法生效。

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