当我清理手表处理程序上的输入时，带有 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 是正确的 ''，因为所有无效字符都被删除了，但我一直看到 @ 987654332@ 里面的输入。

如果我还添加了一个有效字符，例如 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