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!就是摆烂!说你搞不定!让后端来搞定!
今天本来打算试一下或运算符的,结果后端已经把服务关了,那咱们就之后有时间再测吧。
还有个方法,组件中表单是有对应的表单重置的方法的,下次有机会试一试。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。