场景:
模拟下拉框效果,点击事件触发循环出的属性值改变,控制下拉框的显示/隐藏。
问题:
打印出数据发生改变,但是视图没有变化,下拉框没有显示出来
<div class="select_div" @click.stop="foucusDiv(index)">
{{item.platformType}}
<div class="ul_list" @click="foucusDiv(index)" v-if="item.isShow" :ref="`list${index}`">
<div
v-for='(item_i,i) in item.platformTypeArray'
:key="i"
@click="selectContent(index,item.id,item.goodsId,item_i)">{{item_i}}</div>
</div>
</div>
// script部分
foucusDiv(index){
this.dataArr[index].isShow = !this.dataArr[index].isShow;
},
原因:
因为数据层次太多,render函数没有自动更新,需手动强制刷新。
解决:
添加 this.$forceUpdate();
进行强制渲染,效果实现。
// script部分
foucusDiv(index){
this.dataArr[index].isShow = !this.dataArr[index].isShow;
this.$forceUpdate(); // 强制渲染
},