this.$refs.selectRef.focus() 不生效问题解决

最新推荐文章于 2024-04-29 21:35:15 发布
最新推荐文章于 2024-04-29 21:35:15 发布
阅读量1.9k 收藏
点赞数 1
文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44130459/article/details/127843449
版权

前言

在使用 el-select 组件时遇到一个问题：
想利用 this.$refs.selectRef.focus() 方法来获取 el-select 的焦点并打开下列表，结果下拉列表并没有打开；

解决方案

在尝试了几种方法后，发现需要给 el-select 添加 filterable 属性，this.$refs.selectRef.focus() 即可正常使用

Đestiny
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue访问子组件实例时input不能聚焦
xiaoangjun的博客
10-04 426
学习vue官方文档的ref时遇到的一个小坑 我在学习官方文档的ref（访问跟实例）时，根据官方文档的代码，我一开始是这么写的： <body> <div id="app"> <my-compon ref="usernameInput"></my-compon> </div> <script> Vue.component('myCompon',{ template:`<input
Vue中ref与$refs的使用
FEE
01-22 3213
ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是DOM 元素；如果用在子组件上，引用就指向组件实例。 1.DOM元素上使用 template> div class="edit-input" :class="{'edit-input-show': is_edit}"> inp
vue this.$refs input 获取焦点
西瓜
03-16 8675
1.html <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/[email protected]/lib/index.js"></script> <div id="app"> <el-tree :data="data...
element-ui的el-select选择器的@blur事件失效的坑
qq_41287158的博客
09-23 7926
element-UI文档中本来el-select有个blur事件绑定函数属性。但是使用后发现有时候失焦事件并不能触发生效，也就导致所绑定的函数不能执行。 解决办法： 利用el-select的@focus方法，在select标签内 添加 ref 于此便可在focus事件内触发 blur事件。 代码如下： <el-select multiple filterable allow-create default-
Vue + el-ui table 内嵌 input 调用 focus 方法无效；this.$refs.xxx.focus()方法无效
TD_FAlmK的博客
09-18 1721
我又试了一下，当不把标签放在里的时候，比如正常表单（ref不是通过动态赋值）的时候，这段代码是完全没有问题的。如图，当在第一行 9999 处敲击回车之后，控制台打印出了this.$refs的所有组件，也打印了定位前和定位后的log日志，且没有报错，说明我们的代码是正确执行了的。学号HTML，JS，CSS吧，无论框架怎么变，底层都是这东西，当发现框架不支持的时候，可以考虑考虑原生的DOM实现。a.在表格编辑态的时候，可以在①处敲击“回车键”，光标能跳转到②处。
在封装或使用el-dialog的时候无法获取到 $refs的坑
weixin_46468143的博客
09-01 1700
在封装或使用el-dialog的时候无法获取到 $refs的坑
Element UI输入框focus()方法自动获取焦点失败处理方法
weixin_45517017的博客
03-27 1万+
Element UI输入框focus()方法自动获取焦点失败处理方法 ​ 本来想通过自定义事件触发输入框，并获取焦点，但是使用官方提示的focus()方法一直失效 后来百度了半天，终于找到一个比较好的处理方法。 ​ 先放对比代码： 刚开始的代码 <el-input v-if="isFormOpened" v-model="scope.row.name" @blur="updateLib"> </el-input> <el
elment-ui的el-select选择器blur事件失效 bug解决
热门推荐
IS_huang的博客
04-29 2万+
问题： 使用了element UI 中 el-select 组件开发项目当中发现当配置了 filterable 属性之后， @blur 事件便失效， 但你肯定不知道 他也不是完全失效， 当你点击外面得框线时 他还是会生效得！只不过有区域限制， 但正因如此， 相当于完全没用！ <el-select v-model="value" ref="fuzzyS...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
this.$toast() 了解一下？
12-03
前言 在平时的开发过程中，我们总是先写好一个组件...this.$toast({ duration: 3000, content: '这是一条消息提示' }); 没错，就是这么简单的一句话就万事大吉了（就是用 js 调用组件而已啦:face_with_monocle:）。那
vue中$refs的基本用法
如果相遇，那么你好哦~
09-24 2213
1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。3、如何利用 v-for 和 ref 获取一组数组或者dom 节点（:ref =某变量）说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
JavaScript对象与数组参考大全
如果有一天...
01-16 2315
　　本文列举了各种JavaScript对象与数组,同时包括对上述每一对象或数组所完成工作的简短描述,以及与其相关的属性方法,以及事件处理程序,还注明了该对象或数组的父对象用户同样可能需要参考Online Companion中的超级文本Object Hierarchy页面(http://www.netscapepress.com/support/javascript/10-9.htm),以便了解这些
解决远程搜索select框focus()聚焦后无光标无法输入的问题
weixin_44235736的博客
09-25 2293
解决远程搜索select框focus()聚焦后无光标无法输入的问题 实测antd和elementUI通用（需求为全键盘操作） html内容 <a-select ref="searchSelectRef" show-search > <a-select-option v-for="(d, index) in list" :key="index" :value="d.id"> {{ d.name }} </a-select-option> </a-select&
modal模态框里的表单输入框，使用focus()方法无法自动获得焦点
weixin_42190844的博客
09-08 1274
在写界面的时候，要写增加功能。自然而然的写了一个弹框包含一个表单。因为嫌弃每次打开都需要点击输入框才能输入比较麻烦，所以想加一个自动聚焦的功能。结果就试了半天也不行。 正常的想法就是，给el-input注册一个ref，然后使用focus方法来聚焦。 这里遇到的问题就是，如下图，我在打开窗口的事件里，调用 this.$refs[‘nameInput’].focus() 发现并没有自动聚焦，怀疑是不是dom更新的问题，就加上了 $nextTick。然后发现还是没有效果。 查了一下，有可能是调用时机的问题.
vue的ref属性的相关介绍
Little_Pig_Bug的博客
08-01 1243
操作习惯了DOM，在用vue操作数据时，我们开始常常很不习惯，但是用ref，我们可以将他绑定在想要操作的元素或者组件上，从或者他们的DOM。下面的例子我们都是在vue-cli搭建的项目下，运行的。 1.获取元素的DOM &lt;template&gt; &lt;div&gt; &lt;input placeholder="请输入内容" ref="inputs" /&gt; &lt;...
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 552
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
this.$refs.followRecord.$forceUpdate()
01-26
根据提供的引用内容，`this.$refs.followRecord.$forceUpdate()`是Vue中的一个方法，用于强制更新组件或DOM。它可以用于在特定情况下手动触发组件的重新渲染。 这个方法可以在Vue组件的方法中使用，通过`this.$refs...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值