我有以下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"
来做到这一点。
答案 0 :(得分:2)
因为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>
答案 1 :(得分:1)
问题在于Vue不会看到value
数据属性的更改,因为当您滤除非数字时,实际上是在向其分配相同的字符串值。由于字符串在内容相同时是不变的且相同,因此不会触发Vue的反应性。
一个简单的解决方案是将<input>
值手动设置为仅数字的新值。
this.value = event.target.value = event.target.value.replace(/\D/g, '')