vue关于重置表单数据出现undefined的解决

目录
  • vue重置表单数据出现undefined
  • 找到问题，我们有几个解决方案

vue重置表单数据出现undefined

最近联调出现的一个新问题，条件查询在前端很常用，基本的模板就是几个查询条件，一个查询按钮，一个重置按钮。选择查询条件，点击查询，会根据查询条件，筛选出对应的数据。重置按钮就是把所有已选的查询条件一键清空。

因为查询条件比较多，所以可以直接使用表单提交。

我们在这里选了期数传过去，后端根据传过去的条件，返回了相应的内容。

在这里有一个要说的就是，在这个项目里，后端要求每个条件都是必传的，没选的就传空的，所以查询方法是单独写了每个表单的内容的。（不写的话就不会传了，也要在data里定义默认每个数据为空字符串）

form: {
  dateRange: ['', ''],
  startTime: '',
  endTime: '',
  qishu: '',
  content: ''
},
doSearch () {
  this.axios.post(this.changeAllurl, {
    startTime: this.dateRange[0],
    endTime: this.dateRange[1],
    pici: this.form.qishu,
    content: this.form.content,
    page: this.page,
    limit: 10
    }).then(res => {
      if (res.result === '00000') {
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        this.$Message.error(res.data.information)
      }
    })
  },

此时我们点击重置，条件查询表单里的内容应该全部重新变为空值。

// 重置表单
formReset () {
  console.log(this.form)
  this.dateRange = ['',''],
  this.form = {
    qishu: '',
    content: '',
  }
  console.log(this.form)
},

变为空值之后，我们再重新进行条件查询。

在这里出现了一个问题，我们上文说过，他应该把所有的数据都传过去，没有数据的，也要传空字符串，但我们发现，在这个查询里，pici没有传。（按道理应该传pici: ""）

毕竟一共就按了两个按钮，所以我们可以很轻易地想到问题可能出在重置按钮身上。我们在重置方法最开始打印了一下form，可以看到没有任何问题。

在对form里的数据赋值空字串后，我们再次打印form，可以发现期数变成了undefined。所以这就是为什么在第二次查询的时候，pici会丢失。

这里他变成undefined的原因，是因为v-model是双向绑定的。期数是一个选择框，可能01对应是，02对应否，把期数变成空字符串后，空字符串没有对应的选项，就会导致期数变成undefined。

如果我们是一个输入框，就不会存在undefined的问题了。

找到问题，我们有几个解决方案

1.让后端提供空字符串对应的选项（这是因为我的选择框是后端获取的，如果我们是自己写的选择框，前端直接添加就行）

2.判断，为undefined的时候赋值空字符串

因为我这边选择框太多了，所以方法1排除。

方法2的话在查询的时候使用空值合并运算符pici: this.form.qishu ?? ""

（空值合并运算符，如 a = b ?? c，当 b 为 null 或者 undefined 时，将 c 的值赋给 a。在 Java 模板 Freemarker 里有相似语法。）

但是我发现我用这个运算符会报错，原因是用这个运算符在vue 项目的模板里，默认是不可用的。需要引用babel 开发依赖库vue-template-babel-compiler。

好麻烦 pass

所以咱们直接用||或运算符哈。

应该是没问题的，这个方法我没来得及实施，因为后端等不及，后来他直接自己改了代码，现在不需要每条都传空值过去了，所以可以接受undefined。

所以我们还有方法3！就是摆烂！说你搞不定！让后端来搞定！

今天本来打算试一下或运算符的，结果后端已经把服务关了，那咱们就之后有时间再测吧。

还有个方法，组件中表单是有对应的表单重置的方法的，下次有机会试一试。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue+Element-ui表单resetFields无法重置问题

    目录 问题背景 第一个无法解决重置表单解决方案 第二个无法解决重置表单解决方案 问题背景 在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种: 1.<Modal/ >组件内表单填写,在 modal 组件未挂载在 DOM 元素中,就无法获取到 form 表单组件的实例,所以this.$refs[formName]获取实例就会出现 undefined 的情况. 2.比如编辑表格数据,需要回显表单数据,我们一般的做法就是放表单的 raw

  • vue中使用refs定位dom出现undefined的解决方法

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越

  • vue踩坑记录:属性报undefined错误问题

    vue踩坑记录:属性报undefined错误问题

    目录 vue属性报undefined错误 最终解决方法 vue之各种报错问题 vue属性报undefined错误 在一个组件里,通过props传值进去对象,在控制台打印报错误信息,提示某属性不存在. 例如: <div>{{data.param.aaa}}</div> 类似这种的,取对象子级下面的值,就报了undefined. 原因应该是在初始传值,最多默认 data={}. 我尝试在props里设置好默认值,但是依然报错 这么设置的props: props:{     data:O

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • vue关于重置表单数据出现undefined的解决

    vue关于重置表单数据出现undefined的解决

    目录 vue重置表单数据出现undefined 找到问题,我们有几个解决方案 vue重置表单数据出现undefined 最近联调出现的一个新问题,条件查询在前端很常用,基本的模板就是几个查询条件,一个查询按钮,一个重置按钮.选择查询条件,点击查询,会根据查询条件,筛选出对应的数据.重置按钮就是把所有已选的查询条件一键清空. 因为查询条件比较多,所以可以直接使用表单提交. 我们在这里选了期数传过去,后端根据传过去的条件,返回了相应的内容. 在这里有一个要说的就是,在这个项目里,后端要求每个条件都是

  • layui清空,重置表单数据的实例

    最近在使用layui框架,在页面进行表单数据提交后,要是页面表单数据清空,依是有下面方法 表单: <form class="layui-form" action="" lay-filter="addGoodsForm" id="addGoodsForm"> 主题内容 </form> jquery: //监听提交 form.on('submit(upGoodsBtn)', function(data){

  • vue实现重置表单信息为空的方法

    背景 之前表单重置为空的话是这样写的 this.fromline = { access_provider_name: '', // 接入商名称 access_provider_address: '', // 接入商所属地区 remark: '' // 备注 } 直接把表单对象的属性设置为空 今天突然发现一个这样的玩意 少写了好多代码 (开心) this.$refs['fromline'].resetFields() 这个玩意也可以实现表单重置. 以上这篇vue实现重置表单信息为空的方法就是小编分

  • vue在取对象长度length时候出现undefined的解决

    vue在取对象长度length时候出现undefined的解决

    目录 取对象长度length时候出现undefined vue2.0踩坑实况- length undefined?? 取对象长度length时候出现undefined 代码 data为一个对象 var key=Object.keys(datas) var value=Object.values(datas) 使用Object.keys转化一下, 再取长度 var keyslength=key.length 就能顺利出对象长度啦!!! vue2.0踩坑实况- length undefined??

  • vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作

    在项目中做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是很好,弹窗中有表单,在编辑弹窗表单数据之后关闭弹窗,然后点击添加的时候,弹窗里的表单数据还是之前编辑的数据,无法做到清空表单数据,接下来是解决方法了,嘿嘿 首先是不管是添加还是编辑,都需要将子组件需要的对象属性一一写出来,传给子组件, 然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField(),在子组件表单弹窗打开的时候

  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu

  • vue实现表单数据验证的实例代码

    为el-form表单添加:rules 在data中定义规则 将定义的规则绑定在el-form-item 代码如下: <!--登录表单区域--> <el-form :model="loginForm" label-width="0px" class="login_form" :rules="loginFormRules"> <!--用户名--> <el-form-item prop=&q

  • vue实现表单数据的增删改功能

    vue实现表单数据的增删改功能

    本文实例为大家分享了vue实现表单数据增删改功能的具体代码,供大家参考,具体内容如下 图示如下: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0&qu

  • vue自定v-model实现表单数据双向绑定问题

    vue.js的一大功能便是实现数据的双向绑定,本文给大家介绍vue自定v-model实现表单数据双向绑定,具体内容如下所示: 子组件代码如下 v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <div id="app"> <input v-model="price"> </div> new Vue({ el: '#app', data: { price: '' } }); 通过该语句实现price

随机推荐