幽灵资源网 Design By www.bzswh.com
问题描述:
在使用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强制刷新,解决页面不会重新渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue2,刷新,页面,渲染
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...