Vue2如何强制刷新页面实现内容重新渲染？

本文共计391个文字，预计阅读时间需要2分钟。

问题描述：在使用Vue框架开发时，函数中修改了页面中的某个值，函数中查看是修改成功了，但页面中没有及时刷新显示修改后的值。

解决方案：使用 `this.$forceUpdate()` 强制刷新，解决页面未及时更新显示的问题。

问题描述：

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