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

举报
薛定喵君 发表于 2021/06/04 00:42:09 2021/06/04
2.5k+ 0 0
【摘要】 记录下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

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。