vue input 利用watch属性 即时搜索

template

<input type="text" placeholder="输入货物名称" v-model="queryStr" >

debounce 函数

const debounce = (function() {
    let timer = 0;
    return function(func, delay) {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
})();

data属性

data(){
   return {
     queryStr: '',
     results:[]
   }
},

watch

watch: {
    queryStr() {
      debounce(() => {
        this.search();
      }, 200);
    },
},

搜索方法

methods:{
    search(){
        let that = this;
        api.get(url,params{words:that.queryStr}).then(res=>{
            that.results = res.data.data;
        })
    }
}