el-input监听事件失效

在使用vue的时候使用element-ui的el-input组件的时候监听不了keyup.enter回车事件，查了一下原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的：<el-inputv-model="input" @keyup.enter="add" placeholder="请输入内容" ></el-input>在@keyup.

照彦

4848人浏览 · 2017-08-02 22:09:26

照彦 · 2017-08-02 22:09:26 发布

在使用vue的时候使用element-ui的el-input组件的时候监听不了keyup.enter回车事件，查了一下原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的：

<el-input  v-model="input" @keyup.enter="add" placeholder="请输入内容" ></el-input>

在@keyup.enter后加.native即可解决如下所示

<el-input  v-model="input" @keyup.enter.native="add" placeholder="请输入内容" ></el-input>

实验了之后发现不仅仅是keyup.enter回车事件，其他事件也被隐藏，需要在其后加.native

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^