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

问题描述：

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

解决：

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

例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<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>