我只想驗證輸入是否為數字，只要有人輸入字串，輸入框就會被清除。
首先，我像這樣在 $event 上做了一個方法函式（ps。我使用道具）
<BaseInput
:value="nama"
@update="nama = ruled($event)"
label="Nama"
type="type"
/>
這就是方法，我使用 RegExp 檢查 $event 值是否為數字。當它為假時，我將 $event 值回傳到空字串。
ruled(event) {
console.log(event)
var intRegex = new RegExp(/[0-9]/);
var data = intRegex.test(event)
if(!data) {
alert("Value Must Number")
event = ""
console.log('masuk if' data)
}
return event
}
但是它沒有清除輸入框，有人知道為什么會這樣嗎？
uj5u.com熱心網友回復：
建議：
- 而不是
@update你必須使用@keypressor@change。 - 您可以
v-model用于雙向資料系結。
作業演示：
new Vue({
el: '#app',
data: {
nama: ''
},
methods: {
ruled(event) {
var intRegex = new RegExp(/^\d $/);
var data = intRegex.test(this.nama);
if (!data) {
alert("Value must contain number");
this.nama = "";
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
v-model="nama"
@change="ruled($event)"
label="Nama"
type="text"
/>
</div>uj5u.com熱心網友回復：
正如創意學習者所說，我必須只清除子組件中的輸入框，所以我在我的子組件上做了這個
<template>
<input
:value="value"
:placeholder="label"
@input="$emit('update', ruled($event))"
/>
</template>
這是方法：
methods: {
ruled(event) {
//console.log(event)
var val = event.target.value
if(event.target.type == "number"){
var intRegex = new RegExp(/[0-9]/);
var intdata = intRegex.test(val)
if(intdata == false) {
error = "Value must contain number"
//alert("Value must contain number")
return event.target.value = ""
}
}
return val
}
}
非常感謝讓我理解的創意學習者
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/437628.html