解决页面v-for中修改item属性值后页面v-if不改变的问题

场景:
模拟下拉框效果,点击事件触发循环出的属性值改变,控制下拉框的显示/隐藏。

问题:
打印出数据发生改变,但是视图没有变化,下拉框没有显示出来

<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();  // 强制渲染
},