undefinedfix
Sign in

Vue requests data asynchronously. The data is loaded only after the page rendering is completed, and the data cannot be backfilled into the page

riadrifai edited in Thu, 03 Nov 2022

The logic of the page is to request the back-end data first, and then backfill it to the page. But in the implementation, I found that the data was asynchronous. I want to ask the boss how to modify it. Here is the related code.

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);
},

Print variables out in order. As a result, the data is not backfilled into the page. Thank you very much for your help.

2 Replies
rechargeplan
commented on Fri, 04 Nov 2022
success(result) {
  let data = JSON.parse(result);
  this.Header = data.Header
  console.log(this.Header,1);
}

What do you have here this.Header It doesn't point to component instances. Can be changed to

success:(result) => {
  let data = JSON.parse(result);
  this.Header = data.Header
  console.log(this.Header,1);
}
ePumps
commented on Fri, 04 Nov 2022

It's through this.getList () can this method be filled back and forth? You can put the operation data in the callback function of the calling interface, that is, success (result) {}