javascript - Vue.js 输入值不反射(reflect)组件数据中的值

Question

我有以下输入:

<input :value="inputAmount" @input="handleAmountInput($event)" placeholder="Enter amount..." type="text">

我不想使用 inputAmount 进行双向绑定(bind)，因为我想在用户输入时清除 handleAmountInput() 函数中的非数字字符输入东西:

handleAmountInput(e) {
    const cleanInput = e.target.value.replace(/\D/g, '');
    this.inputAmount = cleanInput;
    console.log(cleanInput);
},

问题是，输入本身并未反射(reflect)设置为 inputAmount 的已清理字符串。如果我在单独的元素或 console.log 中显示 inputAmount 就像上面的代码片段一样，它显示得很好，但是使用 将值绑定(bind)到输入:value 似乎不起作用并显示完整的输入字符串，包括非数字字符。我在这里做错了什么以及如何获取输入以显示清理后的字符串？

Answer 1

我还不确定为什么你的代码不能像我期望的那样工作，但修复它的方法是同时使用 v-model和 @input同时处理程序...

const app = Vue.createApp({
  data() {
    return {
      inputAmount: ''
    }
  },
  methods: {
    handleAmountInput(e) {
      this.inputAmount = e.target.value.replace(/\D/g, '');
      console.log(this.inputAmount);
    },
  },
})

app.mount('#app')

<script src="https://unpkg.com/vue@3.1.5/dist/vue.global.js"></script>
<div id='app'>
  <input v-model="inputAmount" @input="handleAmountInput($event)" placeholder="Enter amount..." type="text">
  <pre>{{ inputAmount }}</pre>
</div>

更新

好的，我现在明白你的代码不起作用的原因了。发生了什么:

1. inputAmount 的值例如 '123' (反射(reflect)在 <input> 中)
2. 用户类型 a
3. 你的 @input处理程序被调用。它接收值 '123a' ，创造清洁值(value)的工作'123'并将其分配给 inputAmount
4. 来自 Vue POV 的值 inputAmount 根本没有改变所以不需要重新渲染并且<input>仍然显示 '123a'即使是inputAmount值为 '123'

因此，另一种修复代码的方法就是分配一些值 <input>永远不能生产成inputAmount第一个只是为了触发更新(下面的演示)

const app = Vue.createApp({
  data() {
    return {
      inputAmount: ''
    }
  },
  methods: {
    handleAmountInput(e) {
      this.inputAmount = null
      this.inputAmount = e.target.value.replace(/\D/g, '');
      console.log(this.inputAmount);
    },
  },
})

app.mount('#app')

<script src="https://unpkg.com/vue@3.1.5/dist/vue.global.js"></script>
<div id='app'>
  <input :value="inputAmount" @input="handleAmountInput($event)" placeholder="Enter amount..." type="text">
  <pre>{{ inputAmount }}</pre>
</div>