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

问题描述：

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

赞 (0)

相关推荐

  • 解决vue数组中对象属性变化页面不渲染问题

    做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • VUE实现强制渲染,强制更新

    列表渲染,以下数组操作方法可触发渲染 push() pop() shift() unshift() splice() sort() reverse() 当采用特殊方法操作数组后,导致无法更新数据到UI,此时可使用强制渲染,方法如下 this.$forceUpdate() 以上这篇VUE实现强制渲染,强制更新就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue修改对象的属性值后页面不重新渲染的实例

    最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="

  • 解决Vue 通过下表修改数组,页面不渲染的问题

    需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值: vm.todos[0] = { name: 'New name', description: 'New description' }; 会导致Vue无法更新View. 正确的方法是不要对数组元素赋值,而是更新: vm.todos[0].name =

  • vue 刷新之后 嵌套路由不变 重新渲染页面的方法

    解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面

  • 解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）

    问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: 运用 this.$forceUpdate()强制刷新 代码案例 <Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled=&quo

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

    问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: 运用 this.$forceUpdate();  //强制刷新,解决页面不会重新渲染的问题 例: <template> <div> <el-card> <ul class="list-style-none title-list"> <li v-for="item in titleList&

  • 解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

  • vuex结合session存储数据解决页面刷新数据丢失问题

    vuex结合session存储数据解决页面刷新数据丢失问题

    目录 前言 一.原因: 二.解决思路: 1.本地存储方法: 2.实现步骤: 3.优化: 前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上. 在项目中是使用vuex保存数据,但是网页刷新后,store中保存的数据丢失了. 提示:以下是本篇文章正文内容,下面案例可供参考 一.原因: vuex作为全局的数据状态管理机制,store中的数据是保存在运行内存中,当页面刷新时,页面会重新加载vue实例,store里边的数据就会被重新赋值变成初始化状态. 二.解决思路: 将

  • Vue同一路由强制刷新页面的实现过程

    目录 1. 思路 2. 实现过程 2.1 新建一个名为refresh.vue的文件 2.2 在refresh.vue里添加 beforeRouteEnter 2.3 在路由文件里,加上refresh 的路由 2.4 当你想刷新当前页面的时候,可以调用下面这段代码 1. 思路 使用this.$router.replace(),跳到一个空白页,然后this.$router.replace()重新跳回来 使用this.$router.replace()的原因是,其实跟this.$router.push

  • Vue刷新后页面数据丢失问题的解决过程

    目录 一.为什么刷新后数据会丢失 二.解决思路 三.解决方法 四.总结 总结 一.为什么刷新后数据会丢失 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失.因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值. 二.解决思路 办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage.localStorage.cookie) 办法二:在页面刷新的时候再次请求远

  • 微信web端后退强制刷新功能的实现代码

    具体代码如下所示: <script> //生成uuid var uuidChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""); function uuid() { var r; var uuid = []; uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-"; uuid[14] =

  • Vue-input框checkbox强制刷新问题

    在引用input框的checkbox属性时,选中后会出现数据已经刷新,checkbox选中状态不会改变.这时在事件触发后可以调用this.$forceUpdate(),强制刷新页面解决这个问题. input框可以加入readonly="readonly"禁止更改 ps:vue中关于checkbox的问题 在vue中写checkbox时,发现出现问题:当点击一个选项时,输出的数组为空,当取消或者点击下一个选项时,才会出现该选项值且下一个选项值不会出现: <template>

  • vue使用keep-alive如何实现多页签并支持强制刷新

    vue使用keep-alive如何实现多页签并支持强制刷新

    目录 使用keep-alive实现多页签并支持强制刷新 需求 思路 已打开菜单组件 Home页面 使用keep-alive以后刷新部分数据如何解决 项目中遇到得问题 使用keep-alive实现多页签并支持强制刷新 需求 我司有一款使用Vue构建的SPA 后台管理系统,此时客户提出一个需求. 1:要求支持打开多页签 2:多页签保留状态,即切换页签的时候不重新刷新内容. 3:关闭某一页签之后,重新打开之后,需要进行刷新 4:在当前页面可以进行强制刷新功能. 如图示意(左侧箭头为多页签,右侧为强制刷

  • ASP强制刷新网页和判断文件地址实例代码

    强制刷新网页 <% '强制性刷新随机验证码 '让随机验证码每次按IE的后退按钮时,返回登录页面的随即码都自动刷新, Response.expires=-1 Response.AddHeader"pragma","no-cache" Response.AddHeader"cache-control","no-store" %> 判断文件地址是否有效 <% Response.Write("")

  • 使用ajax和history.pushState无刷新改变页面URL示例

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 1.可以无刷新

随机推荐