當(dāng)我們使用Vue進(jìn)行表單輸入的時(shí)候,經(jīng)常會(huì)遇到輸入中斷的問(wèn)題。比如,當(dāng)用戶在一定時(shí)間內(nèi)沒(méi)有輸入任何內(nèi)容時(shí),我們會(huì)希望在表單中顯示一個(gè)默認(rèn)值或者在表單下方提示用戶需要填寫(xiě)該字段。
<template>
<div>
<input v-model="message" type="text" >
<p v-show="showDefault">請(qǐng)輸入內(nèi)容</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
showDefault: true
}
},
watch: {
message(newVal) {
if (newVal === '') {
this.showDefault = true;
} else {
this.showDefault = false;
}
}
}
}
</script>
上面的代碼演示了如何在Vue中使用v-model綁定輸入的內(nèi)容,并且通過(guò)watch屬性來(lái)監(jiān)聽(tīng)輸入框的值。當(dāng)輸入框的值發(fā)生改變時(shí),會(huì)自動(dòng)更新showDefault的值,從而顯示或者隱藏提示框。
但是在實(shí)際開(kāi)發(fā)中,我們還經(jīng)常會(huì)遇到更復(fù)雜的輸入中斷問(wèn)題。比如,在輸入框中輸入過(guò)程中,需要調(diào)用API獲取數(shù)據(jù),但是輸入框的值發(fā)生改變,需要取消之前的API請(qǐng)求,重新發(fā)起請(qǐng)求。下面是一個(gè)示例代碼:
<template>
<div>
<input ref="searchInput" v-model="inputValue" @input="handleInput" type="text" >
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
watch: {
inputValue(newVal) {
// 輸入發(fā)生變化,取消之前的請(qǐng)求
if (this.timer) {
clearTimeout(this.timer);
}
// 發(fā)起新的請(qǐng)求
this.timer = setTimeout(() => {
this.getData(newVal);
}, 500);
}
},
methods: {
handleInput(event) {
// 監(jiān)聽(tīng)輸入框輸入事件
this.inputValue = event.target.value;
},
async getData(value) {
try {
const res = await fetch(`http://api.example.com/${value}`);
const data = await res.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
}
}
</script>
上面的代碼演示了如何在輸入框輸入過(guò)程中,自動(dòng)調(diào)用API獲取數(shù)據(jù)。其中,輸入框的值改變時(shí),通過(guò)watch屬性來(lái)監(jiān)聽(tīng)輸入框輸入的值,并且在一定時(shí)間(這里是500毫秒)內(nèi)重新發(fā)起請(qǐng)求。如果輸入框的值在這個(gè)時(shí)間內(nèi)改變,就取消之前的請(qǐng)求,重新發(fā)起一個(gè)新的請(qǐng)求。
通過(guò)上面的兩個(gè)示例,我們可以看出,在Vue中處理輸入中斷問(wèn)題并不困難。無(wú)論是監(jiān)聽(tīng)輸入框的值,還是調(diào)用API獲取數(shù)據(jù),都可以通過(guò)Vue的watch和methods屬性來(lái)實(shí)現(xiàn)。