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


Posted in Javascript onMay 25, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 #Javascript
了解JavaScript中的选择器
May 24 #Javascript
Javascript通过控制类名更改样式
May 24 #Javascript
redux.js详解及基本使用
May 24 #Javascript
javascript获取元素的计算样式
May 24 #Javascript
运用js实现图层拖拽的功能
May 24 #Javascript
了解javascript中let和var及const关键字的区别
May 24 #Javascript
You might like
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Sublime开发python程序的示例代码
2018/01/24 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python清空文件并替换内容的实例
2018/10/22 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python魔法方法详解
2019/02/13 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
三年大学自我鉴定
2014/01/16 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
会计学习心得体会
2014/09/09 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
离婚案件原告代理词
2015/05/23 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers