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程序设计有所帮助。

赞 (0)

相关推荐

  • vue.js表格组件开发的实例详解

    vue.js表格组件开发的实例详解

    前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone

  • vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为.例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框. 为了应付这种需求,就做了这个指令,github地址: vue-auto-focus ,欢迎star. example <template> <form v-aut

  • vue 简单自动补全的输入框的示例

    vue 简单自动补全的输入框的示例

    实现一个输入框,输入信息后显示由后台返回的数据,供用户选择,之前用的elm的组件,不过那个有点大...简单的情况下自己实现一个也能满足要求...应该吧... 主题包括一个input用于输入,一个div用于展示数据,div里面是数据项item 当在input中按下回车时,会根据信息去后台获取数据,如果用户点击了别的地方,input失去焦点,则提示的div也应该收起来 bug: 在blur事件中,如果直接将isShow设置为false会出问题,先失去焦点,显示面板消失,所以你的点击不会被监听到...

  • 详解auto-vue-file:一个自动创建vue组件的包

    auto-vue-file auto create .vue file by shell command 通过终端自动创建vue文件 前言: 1: 我们在写xxx.vue页面文件的时候,一般都要写这些重复的代码: <template> <div class="zlj-comp-ct"> zlj组件 </div> </template> <script> export default { name: 'zlj' } </s

  • 在vue中使用Autoprefixed的方法

    为了使我们的项目兼容各种浏览器,我们可能会在开发中写大量的前缀.即使有了IDE为我们提供了边界的方式.但是仍然需要我们去花时间和精力.而这样会浪费我们很多的时间.为了在开发中提升团队的开发效率,并且同时节省时间,我们引入了autoprefixed.搭配webpack使用,在每次打包的时候自动的给我们的样式加上前缀来兼容不同的浏览器. 安装依赖包 如果你是使用vue-cli构建的项目.首先执行以下代码安装依赖包. npm install autoprefixer postcss postcss-l

  • 浅析vue component 组件使用

    component 使用 component的注册 1.全局注册 使用用Vue.component('componentName',{template:'<div class="tem1">hello world</div>'})在初始化实例之前. componentName自定义名称 在实例声明的作用域下中使用<componentName></componentName> 成功渲染效果就是 '<div class="te

  • vue2组件实现懒加载浅析

    vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

  • Vue.js中兄弟组件之间互相传值实例

    兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script

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

    本文实例讲述了Vue Autocomplete 自动完成功能.分享给大家供大家参考,具体如下: 页面 : 用闭包的方式,index表示第几个组件 <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="((item)=>{handleSelect(item, index)})&qu

  • Vue.js展示AJAX数据简单示例讲解

    最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

  • python实现图书馆抢座(自动预约)功能的示例代码

    python实现图书馆抢座(自动预约)功能的示例代码

    脚本功能 系统开放座位时快速预约指定位置 可以设置预约的时间段 运行以后会一直帮你抢,需要手动停止 即使遇到更强的脚本自动帮抢下一个座位 实现 首先解决登录问题,通过F12找出登录请求包,分析对比一下包可以发现一般只有用户名和密码这个参数是变化的,然后用requests.session()的实例化去请求登录接口,登录成功. 然后预约座位抓一下包,分析包找到变化的关键的参数,一般情况下关键参数只有座位id.开始时间.结束时间,其他的参数一股脑照搬就行了,接下来用刚刚登录成功的那个requests.

  • vue实现lodop打印功能的示例

    vue实现lodop打印功能的示例

    1.官网下载 http://www.lodop.net/download.html 2.解压安装运行 3.vue部分实现 3.1将lodopDuncs.js文件放入工程中,具体操作可见:http://www.lodop.net/faq/pp35.html 3.2 编写代码 <template> <div class="hello"> <button class="print-btn" v-on:click="btnClickP

  • Redis实现订单自动过期功能的示例代码

    前言 用户下单后,规定XX分钟后自动设置为"已过期",不能再发起支付.项目类似此类"过期"的需求,笔者提供一种使用Redis的解决思路,结合Redis的订阅.发布和键空间通知机制(Keyspace Notifications)进行实现. 配置redis.confg notify-keyspace-events选项默认是不启用,改为notify-keyspace-events "Ex".重启生效,索引位i的库,每当有过期的元素被删除时,向**key

  • MyBatis-Plus实现字段自动填充功能的示例

    MyBatis-Plus实现字段自动填充功能的示例

    目录 一.前言 二.实现 1. 实体类 2. 公用字段 - 使用注解填充字段 3. 自定义MyMetaObjectHandler字段自动填充处理类继承MetaObjectHandler 一.前言 在项目中,我们有一些公共的字段需要做修改 如: gmt_create:创建时间 creator_id:创建人 gmt_modified:修改时间 modifier_id:修改人 这时候我们可以采用 MyBatis-Plus 中的字段自动填充功能去实现 思路:抽取公用字段封装到BaseEntity类中,再

  • Vue实现快捷键录入功能的示例代码

    Vue实现快捷键录入功能的示例代码

    项目需要在页面使用快捷键,而且需要对快捷键进行维护,然后参考了此篇文章,改成自己的. 记录一下. 首先有一个组件,用来实现快捷键的录入操作. 直接上代码: hotkeyInput.vue <doc> 快捷键输入框 -- 用于快捷键的录入 </doc> <template> <div class="shortcut-key-input" :class="{ cursor: focus }" :style="$prop

  • 基于vue的换肤功能的示例代码

    基于vue的换肤功能的示例代码

    最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的.想着写一篇文章,来写一写实现过程中遇到的一些问题. 项目github地址 项目github地址 一 先看一下实现效果吧 设置主题颜色 讲道理这么一个功能,我觉得这么几点可以说下,分步实现: 1. 色值的选取 2. scss 的一些小众用法(多变量CSS值的批量设置) 3. 全局事件巴士的应用 1 色值的选取和原则 推荐大家看下蚂蚁金服的设计指引,里面对常见的交互和界面设计有一套不错的指引和建议,喜欢看书的也可以

  • JS实现仿百度输入框自动匹配功能的示例代码

    现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东. 复制代码 代码如下: <HTML><HEAD><title>带输入匹配的文本框</title><style>body,div {font-family:verdana;line-height:100%;font-size:10pt;}input {width:

  • PHP使用file_get_contents发送http请求功能简单示例

    本文实例讲述了PHP使用file_get_contents发送http请求功能.分享给大家供大家参考,具体如下: 服务器端模拟 POST/GET 等请求,使用 CURL 很容易办到(例如前面一篇<php使用CURL模拟GET与POST向微信接口提交及获取数据的方法>),那么如果不使用 CURL 库,又该怎么办呢? $data = array( 'test'=>'bar', 'baz'=>'boom', 'site'=>'www.nimip.com', 'name'=>'

随机推荐