vue中mounted内如何调完异步方法再渲染

问题描述:我们在mounted内执行异步方法,会先执行后边的语句,这就导致取不到想要的值。

方法:我们在方法中加入回调函数,将mounted的同步语句放在回调函数内,渲染语句套上$nextTick。

示例

复制代码
     data() {
            return {
                carouselArr:[],
            }
        },
        methods: {
           getList(callback) {
            fun().then(res => {
              this.carouselArr = res.data;
         console.log(this.carouselArr);
              // 回调
              callback(this.carouselArr);
            })
          }
        },
        mounted() {
          var _this = this;
          this.getList(function (arr) {
              _this.$nextTick(() => {
                    console.log(arr);
              });
          });
        }                   
复制代码

 

示例中出现的“fun()”是调用的后台的一个方法。

 

posted @   维新派丁真  阅读(6767)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程
点击右上角即可分享
微信分享提示