ฉันมีช่องป้อนข้อมูลอย่างง่ายในเทมเพลต Vue และฉันต้องการใช้ debounce มากหรือน้อยเช่นนี้
<input type="text" v-model="filterKey" debounce="500">
แต่debounce
คุณสมบัติที่ได้รับการคัดค้านใน Vue 2 คำแนะนำนี้บอกว่า: "ใช้ v-on: input + ฟังก์ชั่น debounce บุคคลที่สาม"
คุณใช้มันอย่างถูกต้องได้อย่างไร?
ฉันพยายามที่จะใช้มันโดยใช้lodash , v-on: inputและv-modelแต่ฉันสงสัยว่ามันเป็นไปได้ที่จะทำโดยไม่มีตัวแปรพิเศษหรือไม่
ในเทมเพลต:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
ในสคริปต์:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
ตัวกรองจะถูกใช้ในcomputed
อุปกรณ์ประกอบฉากในภายหลัง