关于vue2强制刷新,解决页面不会重新渲染的问题
2019-12-11 12:11
901 查看
问题描述:
在使用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强制刷新,解决页面不会重新渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- html关于强制显示、隐藏浏览器的滚动条,解决由于高度变化带来的滚动条影响页面宽度的问题
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- 关于extjs中的tabpanel的刷新等若干问题,解决tabpanel内页面刷新,更新数据等问题。
- 当回车关联查询按钮时,如何解决页面重新刷新的问题!
- 解决微信浏览器返回上一页面强制刷新的问题
- 小记--关于页面缓存,刷新页面不会获取最新数据问题
- 解决vue修改数据页面不重新渲染问题
- 关于页面局部定位刷新问题解决
- easyui关于解决tab添加的页面通过href加载数据内容的页面刷新后form表单重复提交的问题;
- Fragment应用放置后台很久再次进入不会重新刷新数据展示、或者直接崩溃问题解决
- vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
- javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题
- 关于jQuery EasyUI 中刷新Tab选项卡 后一个页面变形的问题的解决方法
- 关于页面刷新vuex数据消失问题解决方案
- 关于webview加载网页,返回后总是刷新页面问题解决
- 关于iOS11上MJRefresh tabview刷新后,重新加载另一组数据, 回不到顶部或者头尾显示混乱等问题解决
- 在Asp.net 2.0 中禁用页面缓存解决页面刷新(重新加载数据)的问题!
- 关于在git新建分支后IntelliJ IDEA不会自动刷新分支问题解决
- 在Asp.net 2.0 中禁用页面缓存解决页面刷新(重新加载数据)的问题!
- EF更新,数据库值变化,前台页面并不变化,刷新也不变化,重新运行程序则变化----开发中遇到的问题(已解决)