“Debounchow Verwenden Sie Input -Darfounce in JavaScript vue.js” Code-Antworten

Debounchow Verwenden Sie Input -Darfounce in JavaScript vue.js

<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>