vue $forceUpdate() 强制页面重新渲染问题（v-for循环值刷新等）

问题描述：

在使用Vue框架开发时，v-for里面数据层次太多， 修改过数据变了，页面没有重新渲染，需手动强制刷新；又或者在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；

解决：

运用 this.$forceUpdate() 强制刷新（因为数据层次太多，render函数没有自动更新，需手动强制刷新。）官网解说如下https://cn.vuejs.org/v2/api/#vm-forceUpdate

代码案例

<Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled="editstatus" @on-change="selectInsurance">
  <Option v-for="item in dataArr" :key="item.code" :value="item.code" :label="item.codename" :disabled="item.disabled"></Option>
</Select>

methods: {
  selectInsurance(){ //刷新车辆保险可选状态
    for(var i=0; i<this.dataArr.length; i++){ 
      var flag = false; //默认没有选中
      var itemI = this.dataArr[i];

      for(var j=0; j<this.form.carInsuranceVOList.length; j++){ //检测选项是否已被选中过
        var itemJ = this.form.carInsuranceVOList[j];
        if(itemI.code == itemJ.insuranceName){
          flag = true;
          break;
        }
      }

      if(flag){
        itemI.disabled = true;
      }else{
        itemI.disabled = false;
      }
    }

    this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
  }
}

 

 如果是在（element-ui）下拉菜单中下拉框选择后绑定值改变，显示不变也可以如下代码这样写：

（ 添加 @change="$forceUpdate()" ）

<el-select 
  v-model="reqData.coupon_code" 
  class="w160"
  @change="$forceUpdate()"
  placeholder="请选择订单类型"
  size="small">
  <el-option
  v-for="(item,index) in orderList"
  :key="index"
  :label="item.name"
  :value="item.id">
  </el-option>
</el-select>

参考：https://blog.csdn.net/xuaner8786/article/details/81217075