Vue中 数据改变但未渲染的问题,页面中并没有自动更新,但是在控制台可以打印出来,常见解决方法

在Vue组件中,在mounted阶段调用了一个函数去请求异步数据,将返回结果赋给data里面的值却失败了,赋值完console.log()出来明明是有值的,但页面却没有更新过来。我还一直以为是nuxt生命周期的原因,但明显不是。因为这个问题只有在偶尔才会出现,并不是每次进入页面时渲染都会有这个问题。

1.简单粗暴的方式:重新加载整个页面(体验不友好,不推荐)

2.不妥的方式:使用 v-if

<template>
  <my-component v-if="showComponent" />
</template>
<script>
  export default {
    data() {
      return {
        showComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // 从 DOM 中删除 my-component 组件
        this.showComponent = false;
        
        this.$nextTick(() => {
          // 在 DOM 中添加 my-component 组件
          this.showComponent = true;
        });
      }
    }
  };
</script>

3.较好的方法:使用Vue的内置forceUpdate方法

  • 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身插入插槽内容的子组件,而不是所有子组件。

// 全局
import Vue from 'vue';
Vue.forceUpdate();

// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

4.最好的方法:在组件上进行 key 更改

<template>
  <component-render :key="componentKey" />
</template>


export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

5.使用Object.assign()

MDN:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象

方法:

  • 克隆对象,Object.assign({}, target)

  • 克隆数组,Object.assign([], target)
    针对上例,修改add方法。

this.queryParam = Object.assign({}, this.queryParam);
6.使用Vue.set( target , key , value)

方法:

target: 要更改的数据源(可以是一个对象或者数组)
key 要更改的具体数据。如果是数组元素更改,key表示索引;如果是对象,key表示键值
value 重新赋的值
add() {
      this.$set(this.persons, 1, {key: 'newkey', name: '888'})
      console.log(this.persons)
    }
7. ... 展开语法
  • 对象数据obj,使用obj = {...obj}

  • 对于数组arr,使用arr = [...arr]

add() {
      this.persons[1] = {key: 'newkey', name: '888'}
      this.persons = [...this.persons]
      console.log(this.persons)
    }
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue使用axios请求数据,并且在v-for指令渲染数据时,如果结构没有显示出来,可能存在以下几个可能的问题: 1. 没有正确引入axios:在Vue项目,首先要确保已经正确安装并引入了axios依赖包,可以通过在项目的入口文件或者单独的组件使用import语句来引入axios,例如:import axios from 'axios'。 2. 请求数据的路径错误:在使用axios发送请求时,必须确保请求的路径是正确的,即与后端提供数据的API接口一致。可以通过在浏览器的控制台查看网络请求来确定是否成功发送了请求,并且获取了正确的数据。如果请求路径错误,可以尝试重新检查请求的路径是否正确。 3. 数据结构不正确:在使用axios请求数据后,可能还需要对获取到的数据进行处理,以符合v-for指令的渲染要求。例如,如果获取到的数据是一个对象,而v-for指令需要的是一个数组,则需要将对象转化为数组,然后再进行渲染。 4. 异步请求数据的时机问题:由于axios请求数据是异步的,所以需要确保在数据请求完成后才进行渲染。可以通过使用Vue的生命周期钩子函数,如created或mounted,来保证数据已经获取到后再进行渲染。 综上所述,如果在Vue使用axios请求数据后,v-for指令没有正确渲染数据,可能需要检查axios的引入和使用是否正确、请求路径是否正确、数据结构是否符合要求以及异步请求数据的时机是否正确。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值