mpvue编辑页返回前页面时编辑页输入的数据不自动清空的bug

2020-01-07 23:35:26

记录下mpvue框架下做数据编辑页时出现的bug处理方法

结合网上搜索到的一些处理方法在此重新整理一番

现象

步骤
1.编辑页面输入数据
2.点击左上角返回按钮
3.再次进入编辑页面
结果发现第1步输入的数据仍然显示在页面上,数据没有被清空

解决方法

编辑数据存在于非tab页的情况

网友的方法
1.mounted时执行重置


mounted () {
	Object.assign(this.$data, this.$options.data())
}

2.onLoad时执行重置


onLoad () {
	Object.assign(this.$data, this.$options.data())
}

测试有效,可以发现编辑页的数据被成功重置

编辑数据存在于tab页的情况

博主最近做的页面是登录后跳转首页(tab页),首页会显示数据列表及一个添加按钮(点击后弹出编辑模态框)
此时比较特殊,网友提供的在mounted/onLoad函数中重置的方法在这时就不适用了。

方法缺陷:
vue的create,mounted等生命周期钩子函数只执行一次,当组件创建并被挂载到DOM上以后,就不会执行了,所以这就导致在上述小程序场景中我们左右切换tab页时模态框中的输入值并没有被清空。
这种方法不适用于tab页。

如何改进?
我们已经知道这个问题根源在于mounted只执行一次,所以只要把重置代码放入onShow钩子函数中就可以了
每次页面显示后再重置数据


onShow() {
  Object.assign(this.$data, this.$options.data())
  this.init()//页面数据初始化
},

测试可以发现数据被成功重置

总结

  • 新开非tab页时通过onLoad/mounted/onUnload重置
  • 新开tab页时onLoad/mounted只会执行一次,需要通过onShow重置
本文链接:

评 论:

博主推荐
微信扫码关注「极客之路」
领取学习礼包