vue el-input 使用回车键会刷新页面的问题

最新推荐文章于 2024-07-31 13:47:16 发布

xu_duo_i

最新推荐文章于 2024-07-31 13:47:16 发布

阅读量2.1k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xu_duo_i/article/details/132083506

版权

文章讲述了在Vue项目中，当form表单只有一个输入框时，用户按回车键会意外刷新页面。为避免这个问题，需在el-form组件上添加@submit.native.prevent属性。解决方案提供了一个使用例子。

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

场景：
vue项目中在输入框输入字符并按下回车键搜索时，不会进行搜索，而是会刷新页面

原因：
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能，产生刷新页面的行为

解决：

在 el-form 中加个 @submit.native.prevent，就可以了，

 <el-form ref="form" :model="form" :rules="rules" label-width="80px" @submit.native.prevent>
        <el-form-item label="名称" prop="catalogueName">
          <el-input
            v-model.trim="form.catalogueName"
            clearable
            maxlength="11"
            placeholder="请输入名称"
            show-word-limit
          />
        </el-form-item>
 </el-form>