Uni-App 中 Input 组件 @input 事件中修改 value 属性不生效的问题与解决

众所周知，Uni-App是世界上最好的跨端框架!所有有亿点问题也是理所应当的...

问题描述

<script>
const mobile = ref(null)
function updateValue({ detail: { value } }) {
    value = value.replace(/[^\w\s]/g, '')
    mobile.value = value
    // 无效
}
</script>

<input :model-value="mobile" @input="updateValue" />

原因
当输入任意连续的非法字符时, 输入框不变. 直到输入一个合法字符非法字符才成功被过滤.

解决方案

<script>
const mobile = ref(null)
function updateValue({ detail: { value } }) {
    mobile.value = value
    
    value = value.replace(/[^\w\s]/g, '')
    nextTick(() => {
        mobile.value = value
    })
}
</script>

<input :model-value="mobile" @input="updateValue" />