vue中引用el-autocomplete 组件，失去焦点，input框值变化，展示还是上次结果

最新推荐文章于 2024-04-30 14:28:57 发布
最新推荐文章于 2024-04-30 14:28:57 发布
阅读量4k 收藏 5
点赞数 3
分类专栏： Bug vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43760194/article/details/107539337
版权
Bug 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
vue
7 篇文章 0 订阅
订阅专栏

我是这么处理的
在这里插入图片描述
通过ref，调用清除方法的时候复制下面一行代码

this.$refs['elautocomplete'].suggestions=[];

把之前查询到的下拉框内容清除掉就可以了

吴香香
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
快速解决js开发下拉框中blur与click冲突
11-23
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。 一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件 <input type="text" id="tel"> [removed] document.addEventListener("blur", function(){ console.log("my
基于Vue el-autocomplete 实现类似百度搜索框功能
01-19
效果图如下所示： 首先上代码 <div class=assets-search> ... <div class=search-input-layout> <!--<el-input class=search-input placeholder=检索数据 @keyup.enter.native=searchAssets($eve
el-autocomplete不显示下拉框，选中后还弹出下拉框，手动去掉输入框焦点
weixin_45599105的博客
02-28 677
el-autocomplete不显示下拉框，el-autocomplete选中后还弹出下拉框，el-autocomplete手动去掉输入框焦点
Vue通过下拉框选择字典值，并将对应的label以及value值提交到后端
最新发布
m0_58462450的博客
04-30 791
1.因为做的产品性质是多选，它会以数组的方式提交，所以需要先将Json格式转变为String。方法会遍历数组中的每个元素，如果回调函数返回。后面的表达式不会执行，整个表达式的结果将是。，则整个表达式的结果将被右侧的空字符串。产品性质也是从字典中获取。2.提交表单，先访问了。是可选链操作符，如果。是逻辑或操作符，如果。dict_data表。产品品种从字典中获取。dict_type表。
ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）
weixin_42190844的博客
10-14 9520
今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了 查了一下，是因为有element-ui源码有bug，主要原因是 参考该博客 autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.
第二十一篇：详细说说el-autocomplete模糊搜索所遇到的坑
maliyao4233的博客
08-29 468
*描述：**点击新增弹窗，模糊搜索如果没选择，直接关闭或者取消的话，再次点击弹窗进来会保留上次的搜索记录。**解决办法：**我看网上解决办法很少。有个博主写的这种办法加blur，在失去焦点的时候清空上一次搜索记录。
自动补全输入框-el-autocomplete
G_ruirui的博客
03-14 541
自动补全输入框-el-autocomplete。
this.$set使用 及 element组件（input远程搜索el-autocomplete）使用
guairena的博客
02-22 759
场景： element中的 input远程搜索el-autocomplete组件 使用 如图，当输入商家编码时，会根据输入的内容发起接口请求，请求数据展示在搜索下拉列表里；当点击选中某个编码时，回显对应的商家名称。具体在下面代码中有实现。 问题： 在关闭弹框时，需要清空内容。此时直接清空了form对象，在选中商家编码后，商家名称没有进行回显，打印后却有值。 vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图.
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
10-16
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据。这篇文章主要给大家介绍Vue el-autocomplete远程搜索下拉框并实现自动填充功能，感兴趣的朋友一起看看吧
google-autocomplete：Google自动完成Vue组件
02-04
Google Autocomplete组件不过是官方Google Places API的Vue.js包装器。 尽管使用Vue.js编写了演示，但可以从任何JS框架提取Autocomplete对象。 要求 您将必须安装Vue＆Vuemit： npm install vue -- save npm ...
jquery autocomplete实现框输入提示
04-11
接下来，我们需要在 JavaScript 中初始化 Autocomplete 组件，并设置数据源。这里我们假设你有一个返回 JSON 数据的后端 API，数据源可以是城市名、商品名等。 ```javascript $(function() { var availableTags = ...
element中 el-input 中的 autocomplete 属性怎么使用，为什么不生效
a1783118的博客
11-24 5900
element中 el-input 中的 autocomplete 属性怎么使用，为什么不生效
el-autocomplete的使用技巧（ElementUI）
donghua201的博客
09-28 1989
如果不想让el-autocomplete组件触发fetch-suggestions事件，可以通过设置属性来实现。trigger-on-focus属性是el-autocomplete组件的一个参数，它控制着当input获得焦点时是否自动触发数据查询。将trigger-on-focus属性设置为false后，el-autocomplete就不会在输入框获得焦点时自动触发fetch-suggestions事件了。
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
小太阳的博客
10-21 9314
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
【bug记录】vue中input框修改时页面其他input的数值随之改变
x781054643的博客
03-20 949
vue中input框修改时页面其他input的数值随之改变
element-plus blur和select冲突失效导致移除焦点清空文本框内容失效解决方案
榴莲不好吃的专栏
04-10 416
需求是做一个查询企业的功能，期望必须进行选择后进行查询，如果用户自主输入并没有进行选择，失去焦点的时候清空文本框里面的内容，给el-autocomplete添加@blur事件后发现，在下拉没有出现之前快速失去焦点才能触发blur，下拉列表出现后，blur就失效了，这样就很难达到失去校验清空内容。el-autocomplete添加chagne事件，每当文本框里面的内容改变了就清空v-model绑定的变量，代码如下。
el-autocomplete 踩坑实录#VUE #el-autocomplete #下拉清空 #下拉遮挡 #下拉宽度不够
syncxq的博客
12-12 1629
el-autocomplete 踩坑实录#VUE #el-autocomplete #下拉清空 #下拉遮挡 #下拉宽度不够
element-ui｜el-autocomplete 选中选项时触发blur
ccqq441的博客
03-20 654
原因是选择选项时组件本身会发出一个blur事件，且blur早于change，校验的是旧值，是el-autocomplete组件本身的坑，最后只能给在blur回调里写settimeout从而晚一点校验。如果原本选中内容为空，选中某个选项时会闪现空值校验，然后消失。前提：组件设置了blur时手动触发校验。
Vue中使用v-for循环input失去焦点问题
Jensonhui's Blog
03-22 1960
Vue中使用v-for循环input时，出现输入一个字符，自动失去光标（一次只能输如一个字符）
vue3.0 el-autocomplete
05-18
Vue 3.0 是一款流行的 JavaScript 框架，而 el-autocomplete 则是一款基于 Vue.js 的自动完成组件，用于输入框的自动补全功能。下面是使用 Vue 3.0 和 el-autocomplete 实现自动补全功能的简单示例： 首先，你需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值