美文网首页
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小程序突然数据更新,视图不更新!

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