关于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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
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
php google或baidu分页代码
2009/11/26 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
去除链接虚线全面分析总结
2006/08/15 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
python 文件与目录操作
2008/12/24 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python实现自动重启本程序的方法
2015/07/09 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
学生党员思想汇报范文
2014/01/09 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
开国大典观后感
2015/06/04 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python
vue实现简易音乐播放器
2022/08/14 Vue.js