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 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
javascript常用的方法分享
Jul 01 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 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获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
PHP异常处理Exception类
2015/12/11 PHP
php的socket编程详解
2016/11/20 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
图解js图片轮播效果
2015/12/20 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
js读取本地文件的实例
2017/12/22 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
用python绘制樱花树
2020/10/09 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
《鱼游到了纸上》教学反思
2014/02/20 职场文书
公务员保密承诺书
2014/03/27 职场文书
同意离婚答辩状
2015/05/22 职场文书