问题描述

searchbar

<el-input placeholder="Mac Address" v-model="searchKey"></el-input>
<el-button type="primary" @click="test">Search</el-button>
export default{
  methods: {
    test() {
      alert(1)
    }
  }
}

很多时候我们需要绘制一个搜索框，输入搜索内容后我们可以通过点击搜度按钮获取搜索后的数据，但是通常我们习惯在输入完成后通过enter键来进行搜索减少操作。

解决方案

vue给我们提供了一个很方便的处理方式，直接在input中绑定按键修饰符即可

<input v-on:keyup.enter="submit">

<!-- 也可以缩写成 -->
<input @keyup.enter="submit">

除了enter，还有很多其他按键修饰符，具体请参考官网

所以我们修改上述代码

<el-input placeholder="Mac Address" v-model="searchKey" @keyup.enter="test"></el-input>

很高兴的运行之后发现根本没用！！！哪里出现了问题！？再去翻阅官网，发现在组件里面有一条给组件绑定原生事件

细细想来，el-input是element-ui封装好的组件，所以如果要调用原生的事件，就需要加native

再次修改

<el-input placeholder="Mac Address" v-model="searchKey" @keyup.enter.native="test"></el-input>

运行，输入搜索结果后回车，alert出来1啦，撒花❀~~