【Vue问题】Input在键盘触发Enter时刷新页面

最新推荐文章于 2024-04-17 11:00:00 发布

原创最新推荐文章于 2024-04-17 11:00:00 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

常见问题专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在单输入El-form表单中，通过添加`@keyup.enter.native.prevent`阻止Enter键默认提交表单，避免页面刷新。提供了一段Vue代码示例。

描述：

当form表单中，只有一个input时。按Enter键，会导致表单提交从而会刷新页面

解决方案：

在input元素上添加阻止默认表单提交事件

代码：

      <el-form ref="form" @submit.native.prevent>
        <el-form-item label="类型:">
          <el-input
            v-model="type"
            placeholder="请输入类型"
            validate="required|message:请输入类型"
            @keyup.enter.native="onSubmitFunction"
          />
        </el-form-item>
      </el-form>