美文网首页
mpvue小程序突然数据更新,视图不更新!

mpvue小程序突然数据更新,视图不更新!

作者: LinaXuanling | 来源:发表于2020-04-20 16:23 被阅读0次

我们公司小程序用的mpvue写的,已经上线使用一年了!!但就在前几天,突然小程序所有的多选框都失效了;console了下数据,但数据是在实时更新的!!!但是吧,点击后数据变了但视图就是不更新!这就很奇怪了。翻看了好几遍的vue的响应式原理,也还是不管用!

总结一下,这次烦躁修bug的过程。希望能帮到遇见同样问题的程序媛们!

页面选择框的布局:

<div class="group" v-for="(item, index1) in eventDate.enrollListObj" :key="index1">
   <div class="item" v-for="(block, index3) in item.block" :class="{'hide': noSize && !block.checked}" @click="selectBlock(index1, index3, item.groupNum)" :key="index3">
     <div class="block" :class="block.checked ? 'checked': ''">
         <img :src="blockIcon[block.checked]"/>
     </div>
     <div class="name one-line">{{block.checked ? '已选择':'点击选择'}}</div>
  </div>
</div>        

点击事件的方法, 用的 $set 来更改新添加属性的值,还用了强制刷新!添加的属性也有get和set的!但还是没有反应😡

selectBlock (index, subIndex, groupNum) {
      const page = this
      page.$set(page.eventDate.enrollListObj[index].block[subIndex], 'checked', !page.eventDate.enrollListObj[index].block[subIndex].checked)
      page.$forceUpdate()
}

直到今天下午,我想到是不是还是需要监控属性一下呢?于是我尝试了:

computed: {
  newEnrollListObj () {
    return this.eventDate.enrollListObj
  }
}

那么布局循环的列表数据也要改一下:

<div class="group" v-for="(item, index1) in newEnrollListObj" :key="index1">

重新运行就可以啦!!!!这种突如其来的bug太痛苦了!

相关文章

  • mpvue小程序突然数据更新,视图不更新!

    我们公司小程序用的mpvue写的,已经上线使用一年了!!但就在前几天,突然小程序所有的多选框都失效了;consol...

  • mpvue框架

    【最近更新】mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序...

  • 更新数据setData({})

    小程序更新视图数据必须使用setData方法 如果是更新对象中的某个属性,应该怎么写呢? 这样就是会只更新bigO...

  • React数据更新,视图不更新

    问题描述: 做日历功能的时候,发现了一个问题:切换月份发现数据更新,但是视图不更新 第一次打开日历,正常显示,没有...

  • 小程序实现双向绑定

    我们知道vue是双向绑定的前端框架,视图数据的更新,data就会更新;data更新,视图就会更新;这种双向绑定在小...

  • redux 视图不更新 数据已更新

    文件1:index.js 2 子组件 3 reducer 页面效果: 0 times组件值未更新。。。 现已解决:...

  • 2018-06-09

    小程序知识点整理 Typora 无法实时保存。。。。死了噜 数据绑定 让框架根据映射自动地对视图进行更新。 数据需...

  • Vue2 数据双向绑定原理解析-简易版(个人笔记)

    一、什么是 MVVM 数据双向绑定 MVVM 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据,如下图所示...

  • Vue.$nextTick用法

    vue是数据驱动视图更新,但vue数据变化后,视图不会立即更新,而是异步的过程.具体的更新时机参考主队列,异步队列...

  • Vue中使用$set来添加数据并更新视图的方法

    vue中添加data数据的时候视图是不更新的,vue提供了一种$set的方法来强制修改数据并更新视图的方法: co...

网友评论

      本文标题:mpvue小程序突然数据更新,视图不更新!

      本文链接:https://www.haomeiwen.com/subject/ffpdihtx.html