vue使用input组件，失去焦点和按下回车键造成二次执行同一方法

需求：

使用element-ui中的el-input作为页面的输入框，当输入框失去焦点的时候和用户按回车的时候都触发同一个搜索数据的事件。

一、问题

<template>
 <el-input v-model="val" @blur="searchData"  @keyup.enter.native="searchData"></el-input>
</template>
 
<script>
 export default {
    data() {
      return {
        val: ''
       }
    },
    methods: {
       searchData() {... //搜索操作}
    }
 }
</script>

出现问题：

如果el-input还处于聚焦状态，按enter回车触发搜索事件后，当el-input失去焦点后，又会再触发一次搜索事件。

二、解决办法

这个时候需要在按enter回车之后使el-input失去焦点，这个时候就要用到$event。

<template>
 <el-input v-model="val" @blur="searchData"  @keyup.enter.native="$event.target.blur()"></el-input>
</template>
 
<script>
 export default {
    data() {
      return {
        val: ''
       }
    },
    methods: {
       searchData() {... //搜索操作}
    }
 }
</script>

这样不管是失去焦点，还是按下回车，都只会调用一次方法，避免出现问题