Vue3中如何通过Ref绑定输入框并阻止错误值更新？

方法一：监听input事件实时过滤 #

直接监听输入框的input事件，每次输入时移除包含"错误"的内容：

<template>
  <input v-model="inputValue" @input="filterInvalidText" />
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')

const filterInvalidText = () => {
  // 全局替换所有"错误"字符串
  inputValue.value = inputValue.value.replace(/错误/g, '')
}
</script>

这种方式最直接，用户输入后立即处理，确保输入框内不会保留"错误"内容。

方法二：自定义v-model修饰符复用逻辑 #

如果需要在多个组件中复用这个过滤规则，可以自定义v-model修饰符：

// 在Vue应用初始化时全局注册
const app = createApp(App)
app.directive('model', {
  mounted(el, binding) {
    if (binding.modifiers.blockError) {
      el.addEventListener('input', () => {
        el.value = el.value.replace(/错误/g, '')
        // 手动触发input事件，保证v-model同步更新
        el.dispatchEvent(new Event('input'))
      })
    }
  }
})

之后在任意组件中直接使用：

<template>
  <input v-model.blockError="inputValue" />
</template>

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

方法三：使用watch监听数据变化 #

通过监听绑定值的变化，当检测到"错误"时自动修正：

<template>
  <input v-model="inputValue" />
</template>

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

const inputValue = ref('')

watch(inputValue, (newVal) => {
  if (newVal.includes('错误')) {
    inputValue.value = newVal.replace(/错误/g, '')
  }
}, { immediate: true })
</script>

这种方式适合需要结合其他业务逻辑一起处理的场景，比如同时验证其他规则。

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