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


Posted in Javascript onOctober 29, 2019

问题描述:

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

Javascript 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 #Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 #Javascript
javascript实现简单打字游戏
Oct 29 #Javascript
简单使用webpack打包文件的实现
Oct 29 #Javascript
vue 解决异步数据更新问题
Oct 29 #Javascript
VUE实现强制渲染,强制更新
Oct 29 #Javascript
js实现贪吃蛇小游戏
Oct 29 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php入门教程 精简版
2009/12/13 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
js表数据排序 sort table data
2009/02/18 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
JS实现多功能计算器
2020/10/28 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python对列表的操作知识点详解
2019/08/20 Python
keras:model.compile损失函数的用法
2020/07/01 Python
python上selenium的弹框操作实现
2020/07/13 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Python截图并保存的具体实例
2021/01/14 Python
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
计算机应用与科学个人的自我评价
2013/11/15 职场文书
百日安全活动总结
2014/05/04 职场文书
留守儿童工作方案
2014/06/02 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
联谊会开场白
2015/06/01 职场文书
看上去很美观后感
2015/06/10 职场文书
Redis入门教程详解
2021/08/30 Redis