vue项目中使用this.$forceUpdate()进行强制刷新

最新推荐文章于 2024-09-07 18:41:27 发布

Grady_H

最新推荐文章于 2024-09-07 18:41:27 发布

阅读量2.7k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Grady_H/article/details/123691362

版权

当Vue项目的v-for层级较深，数据改变但视图未更新时，可以使用`this.$forceUpdate()`方法强制刷新页面，确保视图与数据同步。

摘要由CSDN通过智能技术生成

问题：
解决页面v-for中，如果层次太多，有时候数据发生改变但是页面上看到的效果是毫无变化。
解决：
运用 this.$forceUpdate()强制刷新
案例：
页面部分：

<el-form
          :model="form"
          label-width="100px"
          style="width: 800px"
          class="demo-ruleForm"
        >
        <el-form-item prop="conditionValue">
          <el-button type="primary" @click="addCondition">添加条件</el-button>
        </el-form-item>
        <div v-for="(item, index) in conditionForm" :key="index">
        <el-form-item >
          <el-select
            v-model="conditionForm[index].conditionValue1"
            @change="onConditionValue($event, 1, index)"
            style="width: 100px"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in variableList"
              :key="index"
              :label="item.columnComment"
              :value="item.columnComment" 
            >
            </el-option>
          </el-select>
          <el-select
            v-model="conditionForm[index].conditionValue2"
            @change="onConditionValue($event, 2, index)"
            style="width: 100px"
            placeholder="请选择"
          >
            <el-option
              v-for</

最低0.47元/天解锁文章