我们公司小程序用的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太痛苦了!
网友评论