vue请求数据异步,页面渲染完成后数据才加载完成,数据无法回填到页面中

页面的逻辑是先请求后端的数据,然后再回填到页面中。但在实现的时候发现调取数据的时候异步了,想问一下大佬应该怎么修改。下面上相关代码。

methods: {
  // 请求后端数据数据
  getList() {
    $.ajax({
      url: `${window.Glob.BaseUrl}produceprocesscard/getd?primaryKey=BILLNO`,
      type: "GET",
      contentType: "application/x-www-form-urlencoded",
      dataType: "text",
      success(result) {
        let data = JSON.parse(result);
        this.Header = data.Header
        console.log(this.Header,1);
      },
      error(msg) {
        console.log(msg);
      }
    })
  }
},

created() {
  this.$nextTick(function (){
    this.getList()
  })
  console.log(this.Header,0);
},

打印变量,出来的顺序。导致数据没有回填到页面中。非常感谢大佬能够帮忙解答。
image.png

已解决 悬赏分:40 - 解决时间 2021-11-26 13:28
反对 0举报 0 收藏 0

回答2

最佳
  • @

    methods: {
      // 请求后端数据数据
      getList() {
        $.ajax({
          url: `${window.Glob.BaseUrl}produceprocesscard/getd?primaryKey=BILLNO`,
          type: "GET",
          contentType: "application/x-www-form-urlencoded",
          dataType: "text",
          success: (result) => { // 最后执行 (第三个执行)
            let data = JSON.parse(result);
            this.Header = data.Header
            console.log(this.Header,1);
          },
          error(msg) {
            console.log(msg);
          }
        })
      }
    },
    
    created() {
      this.$nextTick(function (){
        await this.getList(); // 第二个执行
      });
      console.log(this.Header,0); // 还是没数据 第一个执行
    },

    为什么不用axios?
    照我这么改 页面能渲染

    支持 0 反对 0 举报
    2021-11-26 07:06
  • @
    this.$nextTick(()=>{
        this.getList()
    })
      //请用箭头函数或者let _this = this;
    支持 0 反对 0 举报
    2021-11-26 07:11