Vue-给element-ui的input输入框绑定键盘事件不生效

问题描述

在vue中使用elementui的input组件绑定回车事件生效。

<el-input @keyup.enter='方法'></el-input>

问题原因

在vue中如果直接使用v-on或@监听事件的话, 监听的是由组件中使用$emit自定义的事件, 例如下面代码。

子组件
...
this.$emit('test')
...

父组件
...
<子组件标签  @test='方法'/>
...

解决方法

使用.native修饰符, 告诉vue这是触发的原生事件不是自定义事件, 比如下面这个监听element-ui的输入框回车事件。

<el-input @keyup.enter.native='方法'></el-input>