我必須在我的輸入中顯示兩個不同的下拉串列。我通過使用 shouldShowWarningBox 方法來做到這一點，每次用戶更新輸入時都會呼叫該方法并更新 showWarningBox 的值。關鍵是，當我快速輸入時，我收到一條錯誤訊息，顯示警告訊息，但這不是真的。如果我慢慢打字，第一個 div 就會被渲染。
我嘗試過使用和不使用 debounce 功能，但行為是相同的，只是有一點延遲。
有任何想法嗎？
.html
<div v-if="!showWarningBox">
//dropbox
</div>
<div v-if="showWarningBox">
//warning message
</div>
.js
data () {
return {
showWarningBox: false,
}
},
methods: {
onInput (value) {
this.debounce(this.shouldShowWarningBox(), 1000)
},
shouldShowWarningBox () {
//conditional that changes showWarningBox
},
debounce (func, delay) {
let id
return (...args) => {
if (id) clearTimeout(id)
id = setTimeout(() => {
func(...args)
}, delay)
}
},
}
uj5u.com熱心網友回復：
debounce回傳一個“去抖”函式。您應該將該函式保存在組件屬性中，并在輸入時呼叫該去抖動函式：
data(){
let debouncedFn = this.debounce(this.shouldShowWarningBox, 1000)
return {
debouncedInput: debouncedFn
}
},
methods: {
onInput (value) {
this.debouncedInput()
},
//...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476115.html
標籤：javascript Vue.js 输入 Vuejs2 去抖