为什么element ui el-input @click事件无效

Question

  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人" @click="alert(1)"></el-input>
  </el-form-item>

如何给el-input添加点击事件

Answer 1

vue.js文档 给组件绑定原生事件

给组件绑定原生事件

有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。例如：

<my-component v-on:click.native="doTheThing"></my-component>

// 使用`navite`修饰符
@click.native="handleClick"
handleClick(){
    alert(1);
}
// 你的写法会报错。会认为alert不是一个函数。好奇是什么场景要绑定点击事件到el-input呢

Answer 2

换成@click.native再试试

Answer 3

问题有两个，

1. input标签一般不用click时间，如果是聚焦使用focus事件，失去焦点使用blur事件进行触发
2. VUE中直接在标签中写@click事件时，等号右边的函数会默认为是vm对象的一个方法，因此会在js中寻找_vm.alert方法，找不到会报以下错误Property or method "alert" is not defined on the instance but referenced during render，正确做法应为@focus = "doSomething"，在js方法中再定义doSomething的功能