vue代码触发select的change,element clearable事件
本文主要介绍了vue elementUI使用el-select时如何解决变更事件的触发问题，有很好的参考价值，希望对大家有所帮助。来和边肖一起看看吧。
如下所示：
El-select v-model= level size= mini placeholder= please select :change= select change()
el选项v-for= item in select :key= item . value :label= item . label :value= item . value /El-option
/el-select
我们需要的是选择后触发，但是你这样写的话，你会发现页面初始化的时候会触发很多次，选择后也会触发很多次。原因是我们用错了标签，所以应该用@change=selectChange()
El-select v-model= level size= mini placeholder= please select @ change= select change()
el选项v-for= item in select :key= item . value :label= item . label :value= item . value /El-option
/el-select
就是这样。v-bind的缩写是：v-on的缩写是@。下面是触发事件，应该是@
补充知识：为elment-ui的el-select选择器添加onblur失焦事件产生的问题
如下所示：
div class=oneline
Span用户号码：/span
div class=block left
El-选择
:no-match-text=msg
:popper-append-to-body=false
Placeholder=请选择
v-model=value 可过滤popper-class= content add _ select
ref=select
el选项
v-for=用户中的项目
:key= item.accont
:label= item.accont
:value= item.accont
/el选项
/el-select
/div
/div
需要实现的功能是，查询输入时，如果用户输入的数据在选项中不匹配，则返回并显示不匹配的数据。
JS代码如下
这个。$ refs . select . $ refs . reference . $ refs . input . onblur=()={
设have item=0；
for(设I=0；ithis . users . length；i ){
如果(这个。$ refs . select . query==this . users[I]。account){
haveitem
}
}
如果(！haveitem){
This.value=没有匹配的数据
//this.msg=
}
}
这个。上面代码的$refs.select.query是选择器输入时查询框绑定的值。
当选择器具有可过滤属性时，可以对其进行查询和选择。
用开发者工具测试时，发现el-select选择器的数据绑定对象的值和查询输入的值不一样。然后，通过查看el-select源代码，发现查询输入的数据绑定在select.query上
最初，el-select有一个模糊事件绑定函数属性。但使用后发现，有时失焦事件无法触发其生效，导致绑定的函数无法执行。
看了源码，知道模糊事件函数有定时器什么的。我不太明白，但我知道这不是浏览器的原生失焦事件。
所以这个问题可以通过使用vue的ref来定位选择器绑定原生onblur事件来避免。
还可以使用操作dom查询导航到该选择器，方法是使用非焦点事件绑定的选择器。
以上对vue elementUI使用el-select时change事件触发问题的解决方案就是边肖分享的全部内容。希望给大家一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。