Vuejs2 Vue.js-元素UI-输入远程搜索解块

我正在使用

vue.js2.3

和

元素ui

输入远程搜索组件。

我希望能够使用
lodash
远程搜索
debounce
，但我发现这很棘手，因为
querysarchsync（queryString，cb）



获取建议计数器：{{counter}
var Main={
数据（）{
返回{
链接：[]，
国家4:“，
超时：空，
柜台:0,，
};
},
方法：{
loadAll（）{
返回[
{“值”：“vue”，“链接”：https://github.com/vuejs/vue" },
{“值”：“元素”，“链接”：https://github.com/ElemeFE/element" },
{“值”：“烹饪”，“链接”：https://github.com/ElemeFE/cooking" },
{“值”：“mint ui”，“链接”：https://github.com/ElemeFE/mint-ui" },
{“值”：“vuex”，“链接”：https://github.com/vuejs/vuex" },
{“值”：“vue路由器”，“链接”：https://github.com/vuejs/vue-router" },
{“值”：“巴别塔”，“链接”：https://github.com/babel/babel" }
];
},
QuerySearchSync（queryString，cb）{
这个是.counter++；
var links=this.links；
var results=queryString？links.filter（this.createFilter（queryString））：links；
clearTimeout（this.timeout）；
this.timeout=setTimeout（（）=>{
cb（结果）；
}，3000*Math.random（））；
},
createFilter（查询字符串）{
返回（链接）=>{
返回（link.value.indexOf（queryString.toLowerCase（））==0）；
};
},
handleSelect（项目）{
控制台日志（项目）；
}
},
安装的（）{
this.links=this.loadAll（）；
}
};
变量向量=Vue.extend（主）
新Ctor（）.$mount（“#app”）
只需将函数包装为去盎司

querySearchAsync: _.debounce(function (queryString, cb) {
    this.counter ++;
    var links = this.links;
    var results = queryString ? links.filter(this.createFilter(queryString)) : links;

    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      cb(results);
    }, 3000 * Math.random());
  }, 500),

更新。
您可以简单地添加
去盎司
属性，如下所示：

<el-autocomplete :debounce="500" :fetch-suggestions="querySearchAsync" />




干杯

<el-autocomplete :debounce="500" :fetch-suggestions="querySearchAsync" />