<template>
<div>
<input type="text" @input="debounceSearch" placeholder="Search">
<span v-if="typing">You are typing</span>
<span v-if="message">You typed: {{message}}</span>
</div>
</template>
<script>
export default {
data: () => ({
message: null,
typing: null,
debounce: null
}),
methods: {
debounceSearch(event) {
this.message = null
this.typing = 'You are typing'
clearTimeout(this.debounce)
this.debounce = setTimeout(() => {
this.typing = null
this.message = event.target.value
}, 600)
}
}
}
</script>