问题描述:

在使用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强制刷新,解决页面不会重新渲染的问题的更多相关文章

  1. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  2. JAVAEE_Servlet_19_重定向可以解决页面刷新问题(sendRedirect)

    重定向可以解决页面刷新问题(sendRedirect) 在向数据库中添加数据的时候,如果使用转发(getRequestDispatcher),数据插入成功后,转发到提示插入成功页面,在数据插入成功页面 ...

  3. Vue-input框checkbox强制刷新

    在引用input框的checkbox属性时,选中后会出现数据已经刷新,checkbox选中状态不会改变.这时在事件触发后可以调用this.$forceUpdate(),强制刷新页面解决这个问题. in ...

  4. angularjs路由菜单强制刷新

    在开发过程中遇到使用路由控制单页加载页面时,点击菜单页面不重新刷新的情况,angularjs认为路由没有变化,而不会去刷新页面,解决办法: angular.module('myApp').direct ...

  5. React-Router browserHistory浏览器刷新出现页面404解决方案

    在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是: 1.has ...

  6. jQuery实现AJAX定时刷新局部页面实例

    本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...

  7. 使用ajax和history.pushState无刷新改变页面URL

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  8. angularjs中关于当前路由再次点击强制刷新

    angularjs中,有一个机制,就是当前路由再次点击的时候,不会再刷新页面,这实在是愁坏了包子,因为业务人员要求一定要刷新,于是我各种百度,然并卵....呜呜呜~~~~~ 于是乎,我就想到写指令了, ...

  9. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Jmeter系列(3)- 常用断言之响应断言

    断言的作用 确定请求是有效还是无效的 添加断言 面板模块介绍 Apply to 作用:指定断言作用范围 Main sample and sub-sample:作用于主main sample和子sub- ...

  2. 『GoLang』面向对象

    我们总结一下前面看到的:Go 没有类,而是松耦合的类型.方法对接口的实现. 面向对象语言最重要的三个方面分别是:封装,继承和多态,在 Go 中它们是怎样表现的呢? Go实现面向对象的两个关键是stru ...

  3. 51nod1821-最优集合【贪心】

    正题 题目链接:http://www.51nod.com/Challenge/Problem.html#problemId=1821 题目大意 \(n\)个可重集合,\(T\)次询问,询问将集合\(S ...

  4. Javascript设计模式之原型模式、发布订阅模式

    原型模式 原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能.降低内存占用.代码复用的效果. 示例一 function Person(name) { this.name = ...

  5. 实验4:开源控制器实践——OpenDaylight

    实验4:开源控制器实践--OpenDaylight 一.实验目的 能够独立完成OpenDaylight控制器的安装配置: 能够使用Postman工具调用OpenDaylight API接口下发流表. ...

  6. Java 爬取 51job 数据 WebMagic实现

    Java 爬取 51job 数据 一.项目Maven环境配置 相关依赖 jar 包配置 <parent> <groupId>org.springframework.boot&l ...

  7. Vulnhub实战-doubletrouble靶机👻

    Vulnhub实战-doubletrouble靶机 靶机下载地址:https://www.vulnhub.com/entry/doubletrouble-1,743/ 下载页面的ova格式文件导入vm ...

  8. SpringPlugin-Core在业务中的应用

    前言 一直负责部门的订单模块,从php转到Java也是如此,换了一种语言来实现订单相关功能.那么Spring里有很多已经搭建好基础模块的设计模式来帮助我们解耦实际业务中的逻辑,用起来非常的方便!就比如 ...

  9. 实时获取股票数据,免费!——Python爬虫Sina Stock实战

    更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 实时股票数据的重要性 对于四大可交易资产:股票.期货.期权.数字货币来说,期货.期权.数字货币,可以从交 ...

  10. CF125E MST company (凸优化+MST)

    qwq自闭的一个题 我来修锅辣!!!!!! 这篇题解!可以\(hack\)全网大部分的做法!!! 首先,我们可以把原图中的边,分成两类,一类是与\(1\)相连,另一类是不与\(1\)相连. 原题就转化 ...