按enter回车使el-input失去焦点

一、问题

今天工作的时候，遇到了一个问题，使用element-ui中的el-input作为页面的输入框，当输入框失去焦点的时候和用户按回车的时候都触发同一个更新数据的事件。（页面的列表中存在有多个el-input，对其中某一个进行操作）

<template>
   <el-form>
     <el-form-item>

        <el-input v-model="msg" @blur="updateData"  @keyup.enter.native="updateData"></el-input>

     </el-form-item>
   </el-form>
</template>

<script>
 export default {
    data() {
      return {
        msg: ''
       }
    },
    methods: {
       updateData() {... //更新操作}
    }
 }
</script>

这样子写确实能够实现 “当el-input失去焦点和按enter回车时都能触发更新事件” 的需求，但是会出现一个问题： 

按enter回车触发更新事件后，el-input还处于聚焦状态，当el-input失去焦点后，就算数据相同，还是会再触发一次更新事件

这个时候需要在按enter回车之后使el-input失去焦点，这个时候就要用到$event,但是直接在updateData函数中使用,在enter回车后还是会触发两次更新数据事件，因为先触发了失去焦点事件--》失去焦点事件触发了更新事件--》更新事件

<template>
   <el-form>
     <el-form-item>

        <el-input v-model="msg" @blur="updateData"  @keyup.enter.native="updateData($event)"></el-input>

     </el-form-item>
   </el-form>
</template>

<script>
 export default {
    data() {
      return {
        msg: ''
       }
    },
    methods: {
       updateData(event) {
        if(event) {
            event.target.blur()
        }
        ... //更新操作}
    }
 }
</script>

二、解决办法

解决上面提到的问题后，最终的代码如下：

<template>
   <el-form>
     <el-form-item>

        <el-input v-model="msg" @blur="updateData"  @keyup.enter.native="enterBlur($event)"></el-input>

     </el-form-item>
   </el-form>
</template>

<script>
 export default {
    data() {
      return {
        msg: ''
       }
    },
    methods: {
       updateData(event) { ... //更新操作},
        
        //回车失去焦点
        enterBlur(event) { event.target.blur() }
    }
 }
</script>