Vue 表单中有input输入框，回车会刷新页面解决办法

最新推荐文章于 2024-07-16 10:02:59 发布

青颜的天空

最新推荐文章于 2024-07-16 10:02:59 发布

阅读量1.6k

点赞数 1

分类专栏： Vue 文章标签： Vue input

本文链接：https://blog.csdn.net/a1056244734/article/details/116485687

版权

Vue 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

本文介绍了如何在Vue项目中使用Element-UI或iView的Form组件时，避免Input组件聚焦后按Enter键导致页面刷新的问题，并展示了如何通过添加`@keydown.enter.native='submit'`和`@submit.native.prevent`事件来防止表单的默认提交行为。

摘要由CSDN通过智能技术生成

问题描述：
在vue项目开发时，运用element-ui或者iView组件的Form组件；当Form组件中只有一个Input组件时，鼠标聚焦输入框后，点击回车键，页面就会刷新。例如以下代码：

<el-form
      ref='login'
      :rules='rules'
      :model='form'
      style='width:100%;'
    >
      <el-form-item prop='userID'>
        <el-input v-model='form.userID' placeholder='请输入用户ID' type='text' @blur='onRoleChange'></el-input>
      </el-form-item>
    </el-form>

要阻止默认行为，在组件Form上添加@submit.native.prevent

<el-form
      ref='login'
      :rules='rules'
      :model='form'
      style='width:100%;'
      @keydown.enter.native='submit'
      @submit.native.prevent
    >
      <el-form-item prop='userID'>
        <el-input v-model='form.userID' placeholder='请输入用户ID' type='text' @blur='onRoleChange'></el-input>
      </el-form-item>
    </el-form>