Question

我有以下Vue代码：

// HTML
<div id="app">
  Value: <pre>{{ value }}</pre>
  <input type="text" :value="value" @input="setValue">
</div>

// JS
new Vue({
  el: "#app",
  data: {
    value: '',
  },
  methods: {
    setValue(event){
      /* Remove non-numeric values */
        this.value = event.target.value.replace(/[^\d]/g, '');
    }
  }
});

我将其设置在JSFiddle上的位置：http://jsfiddle.net/eywraw8t/353729/。

为什么输入法允许我输入非数字值？

如果运行上面的代码，然后在输入元素中输入非数字乱码（例如asdasfa），则会看到输入元素将包含您输入的文本（asdasfa），但输入上方的元素将为空！

我想限制用户只允许在输入中输入数字。我想仅使用Vue，不使用第三方库或type="number"来做到这一点。

Answer 1

因为this.value的值不变（总是=''），所以不会触发重新渲染。

解决方案：

您可以使用this.$forceUpdate()强制重新渲染。

或使用具有不同值的绑定键。

new Vue({
  el: "#app",
  data: {
    value: '',
    errorDescription: ''
  },
  methods: {
  	setValue(event){
      /* Remove non-numeric values */
    	this.value = event.target.value.replace(/[^\d]/g, '')
      this.errorDescription = 'Only Number allow'
      this.$forceUpdate()
    }
  }
})

.error {
  background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  Value: <pre>{{ value }}</pre><span class="error">{{errorDescription}}</span>
  <input type="text" :value="value" @input="setValue">
</div>

Answer 2

问题在于Vue不会看到value数据属性的更改，因为当您滤除非数字时，实际上是在向其分配相同的字符串值。由于字符串在内容相同时是不变的且相同，因此不会触发Vue的反应性。

一个简单的解决方案是将<input>值手动设置为仅数字的新值。

this.value = event.target.value = event.target.value.replace(/\D/g, '')

http://jsfiddle.net/9o2tu3b0/

如何防止Vue输入设置值？

2 个答案: