今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
问题描述：
在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；
解决：
运用 this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
例：
<template> <div> <el-card> <ul> <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强制刷新,解决页面不会重新渲染的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: