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

问题描述：在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成

问题描述：

在使用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强制刷新,解决页面不会重新渲染的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。