vue $watch监听input值的变化,隔几秒之后调用接口

原文:添加链接描述
https://blog.csdn.net/qq_32678401/article/details/81779274

以防作者删除

<template>
  <div class="search-box">
    <input class="box"
           :placeholder="placeholder"
           v-model="query"
    >
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      placeholder: {
        type: String,
        default: '搜索歌曲、歌手'
      }
    },
    data() {
      return {
        query: ''
      }
    },
    created() {
      this.$watch('query', this.debounce((newQuery) => {
        console.log('newQuery')
      }, 200))
    },
    methods: {
      debounce(func, delay) {
	    let timer
	    return function (...args) {
	      if (timer) {
	        clearTimeout(timer)
	      }
	      timer = setTimeout(() => {
	        func.apply(this, args)
	      }, delay)
	    }
	  }
    }
  }
</script>

版权声明:本文为chendd123123原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。