mpvue编辑页返回前页面时编辑页输入的数据不自动清空的bug
【摘要】
记录下mpvue框架下做数据编辑页时出现的bug处理方法
结合网上搜索到的一些处理方法在此重新整理一番
现象解决方法总结
# 现象
步骤 1.编辑页面输入数据 2.点击左上角返回按钮 3.再次进入编辑页面 结果发现第1步输入的数据仍然显示在页面上,数据没有被清空
# 解决方法
# 编辑数据存在于非tab页的情况
网友的方法 1.moun...
记录下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重置
文章来源: blog.csdn.net,作者:薛定喵君,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/jsxg2009/article/details/115244560
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)