Vue Autocomplete 自动完成功能简单示例

本文实例讲述了Vue Autocomplete 自动完成功能。分享给大家供大家参考，具体如下：

页面 ：

用闭包的方式，index表示第几个组件

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"
 placeholder="请输入内容"
 @select="((item)=>{handleSelect(item, index)})">
</el-autocomplete>

JS：

methods: {
 querySearchAsync(queryString, callback) {
 var list = [{}];
 //调用的后台接口
 //let url = 后台接口地址 + queryString;
 //从后台获取到对象数组
 this.$http({
 url: this.$http.adornUrl('yjtgateway/goods'),
 method: 'get',
 params: this.$http.adornParams({keyword:queryString})
 }).then(({data}) => {
 for(let i of data.content){
 i.value = i.goodsCode; //将想要展示的数据作为value
 }
 list = data.content;
 callback(list);
 }).catch((error) => {
 console.log(error)
 })
 },
 handleSelect(item,index) {
 this.dataForm.items[index] = item
 }
}

希望本文所述对大家vue.js程序设计有所帮助。