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)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部