![868ce9f1ae6ca8e3f58f6aa9d28af71d.png](https://i-blog.csdnimg.cn/blog_migrate/5d6d4c0ca900950ef8b9aa0aaee9782c.jpeg)
解决2次回调
<el-input
v-model="input"
placeholder="请输入内容"
@keyup.enter.native="getList"
@blur="getList"
>
</el-input>
「背景」:想开开心心敲代码,没料到一不小心又写了个bug。。。正常的动作就是:每次blur时,如果值有变更就提给咱后段大佬计算一下,然后重新刷新列表。不过输入框多了,摸鼠标的次数就多了,咱用户就变得莫名烦躁了、、、加个回车提交吧!!!然后上面的bug应用而生呀~每次回车都会提交2次请求,被敏锐的大佬给发现了,,,别说我开始还真没注意,不过很快意识到还真是的。
「原因」:每次enter的时候提交一次,此时鼠标失去焦点又触发了blur一次,2次没跑
「思路」:enter后我不调用了,直接走blur吧!
@keyup.enter.native="$event.target.blur"
修改后
<el-input
v-model="input"
placeholder="请输入内容"
@keyup.enter.native="$event.target.blur"
@blur="getList"
>
</el-input>
尝试其他姿势
- 如果enter绑定为空呢,会继续走blur吗?不会
@keyup.enter.native=""
为啥要使用$event啊,我使用e.target.blur不行吗?
- 姿势一:这样行吗?不行,e是undefined
@keyup.enter.native="e.target.blur"
- 姿势二:这样行吗?不行,e是undefined
@keyup.enter.native="enter(e)"
methods: {
enter(e) {
console.log(e)
e.target.blur()
}
}
- 姿势三:这样行吗?不行,e还是undefined
@keyup.enter.native="enter(1, e)"
methods: {
enter(val, e) {
console.log(e)
e.target.blur()
}
}
- 姿势四:这样可以!
@keyup.enter.native="e => enter(e)"
methods: {
...
}
- 姿势五:这样可以!
@keyup.enter.native="enter"
methods: {
...
}
- 姿势六:这样可以!
@keyup.enter.native="enter($event)"
methods: {
...
}
- 姿势七:这样也可以~
@keyup.enter.native="enter(1, $event)"
methods: {
...
}
知其所以然
姿势四、五、六、七解决原理相同,主要是使用vue.js特殊变量$event,官网文档可找到,如下图
![a5abdfcc8a0b95c7182e852d0fc3800d.png](https://i-blog.csdnimg.cn/blog_migrate/21953c3e4dd5a8003b16a27dda86d08b.jpeg)
其他箭头函数等写法都是小细节,虽然文中使用了e,但它其实就是$event