Vue中去掉表单对象上前后空格

实现基于关键字搜索，发现查询到的结果集跟预期不匹配，开发者工具查看相应的请求，发现在请求参数前面多了一个空格，之后就是去掉空格了，vue中去空格只要在该表单对象的v-model上加trim属性即可

说明：如下代码中使用了vuetify 可以理解为封装的文本框

    <el-form :inline="true"><el-form-item><el-input v-model.trim="searchForm.name" placeholder="名称" clearable></el-input></el-form-item><el-form-item><el-button @click="getRoleList">搜索</el-button></el-form-item><el-form-item><!-- 气泡删除 --><el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)"><el-button type="danger" slot="reference" :disabled="delBtlStatu">批量删除</el-button></el-popconfirm></el-form-item></el-form>

这样的话就是两端不能输入空格

Vue中去掉表单对象上前后空格相关推荐

Vue 中定义方法页面上使用
vue中定义方法的格式为什么要这样定义最近在学习前段,特别是HBuildX 我看里面很多方式都是这样使用,所以想强加练习如何引用当然我们的editArticle也可以直接放到js中,如下: 都 ...
在 Vue 中实现 sticky 鼠标上滑显示、下滑隐藏的效果
在 Vue 中实现 sticky 鼠标上滑显示.下滑隐藏的效果首先在需要实现该效果的组件中,创建一个数据属性,例如: isStickyVisible: true,并将其初始值设置为 true. 在组 ...
vue中阻止表单自动提交
有时候我们在用vue项目时,肯定会遇到这样的问题,业务中需要用到form,但是点击提交按钮会触发form的默认提交,如果用在form上绑定return false,需要单独写验证函数和接收到数据后对数 ...
vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...
jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head ...
vue中的表单手机号和邮箱自定义验证规则
文章目录前言手机号和邮箱的自定义验证前言我们在开发过程中使用element UI 或者element-plus 中的表单的时候,会使用到表单验证,比如手机号和邮箱的验证: 手机号和邮箱的自定义 ...
vue中form表单支持回车键提交踩坑
平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索. 此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称&quo ...
vue中使用axios post上传头像/图片并实时显示到页面
前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: <div id="myPhoto&qu ...
Vue 中实现 excel文件上传功能
场景: 上传excel表,并将excel表中的数据构建成实体 <div class="pull-right" v-if="doc"><el-u ...

Vue中去掉表单对象上前后空格

Vue中去掉表单对象上前后空格相关推荐

最新文章

热门文章