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

浊世独行侠

于 2022-05-10 11:39:55 发布

阅读量799

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44972441/article/details/124684709

版权

这个博客展示了如何在Vue中创建一个搜索表单组件。组件包含一个`el-input`元素，利用`v-model`进行数据双向绑定，并在用户失去焦点或按下回车键时触发`submitForm`方法。`submitForm`方法接收`event`参数，确保在提交表单后能够正确移除焦点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<script>
export default {
  data () {
    return {
      search: "",
    }
  },
  methods: {
    submitForm (event) {
      if (event) {
        event.target.blur()
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>

主要是用到了:$event