vue 使用elementUI的input组件，失去焦点和按下回车键重复调用同一方法造成二次执行的问题

优化输入处理：避免回调冲突的输入框事件管理

最新推荐文章于 2024-08-12 15:16:21 发布

原创最新推荐文章于 2024-08-12 15:16:21 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

vue 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在前端开发中，如何通过调整El-input的事件监听，确保在用户按下回车键或失去焦点时仅调用一次`handleInputConfirm`方法，从而避免因重复触发带来的问题。作者分享了一种解决方案，通过将`@keyup.enter.native`绑定到`$event.target.blur`来统一处理。

<template slot-scope="{ row, $index }">
<el-input
 class="input-new-tag"
 v-if="row.inputVisible"
 v-model="row.inputValue"
 ref="saveTagInput"
 size="small"
 @keyup.enter.native="handleInputConfirm(row)"
 @blur="handleInputConfirm(row)"
>
</template>

我发现，在input按下回车键时，会调用两次handleInputConfirm方法处理数据。因为按下回车的时候调用一次方法，同时input也失去了焦点就会再调用一次方法。但是调用两次方法就会出现问题，那么如何只调用一次方法呢，请看下面：

<template slot-scope="{ row, $index }">
<el-input
 class="input-new-tag"
 v-if="row.inputVisible"
 v-model="row.inputValue"
 ref="saveTagInput"
 size="small"
 @keyup.enter.native="$event.target.blur"
 @blur="handleInputConfirm(row)"
>
</template>

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