vue2强制刷新，解决页面不会重新渲染的问题

问题描述：

在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；

解决：

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

例：

<template>
  <div>
    <el-card>
      <ul class="list-style-none title-list">
        <li v-for="item in titleList" v-bind:class="{'active':item.active}" @click="activeItem(item)">{{item.name}}</li>
      </ul>
    </el-card>
 
  </div>
</template>
 
<script>
  export default {
    name: "approval-list",
    data() {
      return {
        titleList: [
          {id: 1, name: 'Property', active: true},
          {id: 2, name: 'Tower'},
          {id: 3, name: 'Unit'},
          {id: 4, name: 'Listing'},
          {id: 5, name: 'Agent'},
        ],
      }
    }, methods: {
      activeItem(_item){
        this.titleList.forEach(item=>{
          item.active=false;
        });
        _item.active = true;
        console.log(this.titleList);
        this.$forceUpdate();
      }
    }
  }
</script>
 
<style scoped>
  ul.title-list {
    display: flex;
 
  }
 
  ul.title-list > li {
    padding: 20px 0px;
    margin: 0px 20px;
  }
 
  .active {
    border-bottom: 2px solid #FF0000;
    color: #FF0000;
  }
</style>