vue 回车查询第一次会清空查询条件

eason_ylf

已于 2022-07-12 10:51:29 修改

阅读量882

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-07-12 10:50:23 首次发布

本文链接：https://blog.csdn.net/qyl_0316/article/details/125738397

版权

Vue 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

在Vue.js开发过程中遇到一个问题，即当页面只有一个文本框且使用回车键进行搜索时，页面会自动刷新导致查询条件丢失。分析发现，这是由于回车触发了表单的默认提交行为。为了解决这个问题，可以在表单元素上添加`@submit.native.prevent`来阻止表单的默认提交行为，从而保持查询条件并防止页面刷新。修改后的代码示例中展示了如何应用这个解决方案。

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

问题：回车查询第一次的查询条件会被清空，整个页面会刷新
分析过程：在vue 开发中，一个页面只有一个文本框，而且检索是通过回车来实现，@keyup.enter.native=“search”

<el-input
  v-model="form.name"
  @keyup.enter.native="search"
  placeholder="请输入" 
  clearable
  suffix-icon="el-icon-search"
></el-input>

原因：在当前页面元素中只有一个文本框时，点击回车时会自动提交表单，换句话说是会自动刷新页面
解决：给表单元素添加： @submit.native.prevent 来阻止默认提交

<el-form 
	:model="form" 
	label-width="70px" 
	ref="form" 
	@submit.native.prevent
 	:hide-required-asterisk="true" 
 	:rules="rules" 
 	label-align="right">
  <el-form-item label="名称" prop="name">
    <el-input
      v-model="form.name"
      @keyup.enter.native="search"
      placeholder="请输入" 
      clearable
      suffix-icon="w-icon-search"
    ></el-input>
  </el-form-item>
</el-form>