<template>
<div>
<input v-model="inputValue" />
<p>{{ delayedValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: "",
delayedValue: ""
};
},
watch: {
inputValue: {
handler: "updateDelayedValue",
deep: true,
immediate: false
}
},
methods: {
updateDelayedValue: debounce(function () {
this.delayedValue = this.inputValue;
}, 500)
}
};
function debounce(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
const later = function () {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
</script>
<style>
/ Add your styles here /
</style>