当我清理手表处理程序上的输入时，带有 v-model 的 Vuejs 输入不更新

Question

我正在使用 Vue 2.6，我在清理输入时遇到了一个奇怪的问题。

我有一个用于实际输入的自定义组件，基本上如下（我添加了一些此处不相关的样式等）：

<template>
  <input :name="name" :value="value" @input="(e) => onInput(e.target.value)" />
</template>

其中 onInput 只是发出 input 事件，value 和 name 都是道具。

我可以在我的页面上使用这个组件：

<Field v-model="field" name="field" />

在大多数情况下效果很好。

问题开始是因为我需要从输入中删除所有小写和白色字符。所以我在 field:

上创建了一个监视处理程序

onFieldChange(field) {
  this.field = field.replace(/[\sa-z]/gi, '')
}

现在，如果我开始输入像 test 这样的无效字符并检查 Vue 组件，我可以看到 field 是正确的 ''，因为所有无效字符都是剥离了，但我一直在输入中看到 test。

如果我还添加了一个有效的字符，例如 T => testT 那么它会正确呈现为 T.

我很清楚问题的根源是什么：我的 Field 组件在其 props 中没有发现任何差异（'value' 保持不变，一个空字符串）因此它不会重新-使成为。但我不明白我该如何解决它，你有什么想法吗？谢谢

Answer 1

只需在nextTick中修改你的字段值即可。

onFieldChange(field) {
  this.$nextTick(()=>{
    this.field = this.field.replace(/[\sa-z]/gi, '')
  })
  // this.field = field.replace(/[\sa-z]/gi, '')
}

jsfiddle

当我清理手表处理程序上的输入时，带有 v-model 的 Vuejs 输入不更新

Vuejs input with v-model not updating when I sanitize the input on a watch handler

javascript

vue.js

vue-component