如何重置vue-tel-input输入框？v-model绑定失效问题求助

问题原因 #

1. @input事件阻断v-model更新：vue-tel-input的v-model依赖组件原生input事件同步绑定值，但你在自定义updatePhone方法中，遇到InputEvent直接return，导致v-model的默认更新逻辑被拦截，phone变量无法正常同步。
2. 组件内部状态未同步：调用addPhone清空phone.value后，vue-tel-input内部维护的输入状态没有被重置，所以输入框仍显示原有内容。

解决方案 #

方案一：改用@change事件替代@input

vue-tel-input的@change事件会在号码验证完成或国家代码变更时触发，不会干扰v-model的默认同步逻辑，更适合处理验证逻辑：

<vue-tel-input ref="telinput" v-model="phone" @change="updatePhone"></vue-tel-input>

修改updatePhone方法，去掉InputEvent的判断：

const updatePhone = (p) => {
    if (p !== undefined && p.valid) {
        phone.value = p.nationalNumber
        valid.value = true
    } else {
        valid.value = false
        phone.value = ""
    }
}

方案二：保留@input并手动同步组件状态

如果必须使用@input，不要拦截InputEvent，同时在addPhone中调用组件的reset方法重置输入框：

const updatePhone = (event, p) => {
    // 移除InputEvent的拦截逻辑，让v-model正常更新
    if (p !== undefined && p.valid) {
        phone.value = p.nationalNumber
        valid.value = true
    } else {
        valid.value = false
        phone.value = ""
    }
}

const addPhone = () => {
    store.mailing.tokens.unshift([
        phone.value,
        variable.value
    ])
    valid.value = false
    phone.value = ""
    // 调用组件reset方法清空输入框
    telinput.value?.reset()
    window.Toast.fire({
        title: 'Contato adicionado com sucesso!',
        icon: 'success'
    });
}

总结 #

优先选择方案一，利用组件原生的@change事件处理验证，避免和v-model的逻辑冲突；若需保留@input，则要确保不阻断v-model的默认更新，并通过组件的reset方法同步内部状态。

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