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

(编辑：jimmy 日期: 2024/11/9 浏览：3 次 )

问题描述：

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

以上这篇关于vue2强制刷新,解决页面不会重新渲染的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：基于axios 的responseType类型的设置方法
下一篇：vue + elementUI实现省市县三级联动的方法示例