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

ゝ一世哀愁。 2022-01-07 14:15 514阅读 0赞

# 问题描述： #

在使用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>

转载于:https://www.cnblogs.com/zhusf/p/10709503.html