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

ゝ一世哀愁。 2022-01-07 14:15 362阅读 0赞

# 问题描述： #

在使用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>

转载于:https://www.cnblogs.com/zhusf/p/10709503.html

发表评论取消回复

表情：

评论列表（有 0 条评论，362人围观）

还没有评论，来说两句吧...

相关阅读

相关强制 Vue 重新渲染组件

有时候，依赖 vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现

迈不过友情╰/ 2023年01月02日 13:29/ 0 赞/ 213 阅读

相关解决vue页面不重新渲染的问题。强制手动刷新。this.$forceUpdate()；

问题背景：选择下拉框之后，页面的数据没有刷新；做法：在mounted里边，监听了layui的下拉框，发送了ajax请求，将返回值都赋值给了vue变量，但是显示的时候

港控/mmm°/ 2022年12月28日 07:21/ 0 赞/ 163 阅读

相关 vue修改数据页面不重新渲染

vue修改数据页面不重新渲染使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div>

柔情只为你懂/ 2022年12月24日 04:57/ 0 赞/ 200 阅读

相关 Vue组件强制刷新（重新渲染）的四种方案对比

Vue的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处；在特定的情况下，还真的要手工触发“刷新”操作，目前有四种方案可以选择： 1. 刷新整个页面（最low的，可

我不是女神ヾ/ 2022年10月05日 10:53/ 0 赞/ 176 阅读

相关 Vue组件强制刷新（重新渲染）的四种方案对比

Vue的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处；在特定的情况下，还真的要手工触发“刷新”操作，目前有四种方案可以选择： 1. 刷新整个页面（最low的，可

拼搏现实的明天。/ 2022年01月29日 06:53/ 0 赞/ 336 阅读

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

问题描述：在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；解决：运用 this.$forc

ゝ一世哀愁。/ 2022年01月07日 14:15/ 0 赞/ 363 阅读

相关 Vue的修改数据页面不重新渲染

需求：通过一个数组渲染出商品列表，现在我通过价格对数组内的商品进行排序，希望改变数组后重新渲染商品列表。问题：数组改变之后并没有重新渲染。测试流程：

╰半橙微兮°/ 2021年09月18日 02:22/ 0 赞/ 418 阅读

相关 ios 页面后退不重新刷新页面问题

使用history.go(-1)回退页面，结果页面不刷新，处理过的数据还留在页面上，容易出现二次处理报错的问题。安卓是没有问题的。使用此方法可以解决加载问题。不限于io

我会带着你远行/ 2021年09月08日 16:50/ 0 赞/ 542 阅读

相关 vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div> <div v-for="(it

迈不过友情╰/ 2021年07月26日 14:29/ 0 赞/ 834 阅读

相关 Vue中如何正确强制组件重新渲染？

Vue中如何正确强制组件重新渲染？有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开...

朱雀/ 2020年07月01日 20:07/ 0 赞/ 965 阅读