Vue.js component not loading/rendering data when called via URL or F5

Question

I have a Vue.js SPA with some pages that display data from a backend. When I navigate the pages via the navbar, everything works fine, components and data are loaded.

When I'm on the page, e.g. localhost:8080/#/mypage and press F5, the data doesn't get loaded / rendered. Same goes for when I directly navigate to the page via the address bar.

The data gets loaded in this function:

async beforeMount() {
    await this.initializeData();
}

I've tried to call the method in every lifecycle hook, i.e. created, beforeCreated, mounted etc...

In the mounted lifecycle hook I'm setting a boolean property to true, so that the table is only rendered when the component is loaded (done with v-if).

mounted() {
    this.componentLoaded = true;
}

Not sure if this is important, but I've tried it with or without and it doesn't work.

I would really appreciate it if somebody knew whats happening here.

EDIT:

this.applications is a prop and contains multiple applications which contain instances. I want to add some variables from the backend to each application.

console.log(1) gets printed
console.log(2) does not

initializeData: function () {
      let warn = 0;
      console.log("1");

      this.applications.forEach(async application => {
        const instance = application.instances[0];

        console.log("2");

        let myData = null;

        try {
          const response = await instance.axios.get('url/myData');
          myData = response.data;
        } catch (err) {
        }

        let tmpCount = 0;   
        let tmpFulfilled = 0;

        myData.forEach(ba => {
            if(!ba.fulfilled){
              warn++;
              application.baAllFulfilled = false;
            }else {
              tmpFulfilled++;
            }
            tmpCount++;
          })

        console.log("3");

        // Assign values
        this.baTotalWarnings = warn;
        application.baAnzahl = tmpCount;
        application.baFulfilled = tmpFulfilled;

        this.componentLoaded = true;
      }

@Deda I'm actually building an expansion for an already existing monitoring website (Spring-Boot-Admin). I don't know their router settings nor can I change them. — sxz, Aug 08 '19 at 11:40

iepure · Answer 1 · 2019-08-08T13:15:38.087

2

Try removing the async and await keywords from your beforeMount, and remove this.componentLoaded from mounted. Set it instead in the then block (or after await) in your initializeData method. I'm not sure Vue supports the async keyword in its lifecycle methods.

Something like this:

beforeMount() {
    this.initializeData(); // start processing the method
}

methods: {
    initializeData() {
        callToBackend().then(() => {
            this.componentLoaded = true // backend call ready, can now show the table
        })
    }
}

edited Aug 08 '19 at 13:15

answered Aug 08 '19 at 08:06

iepure

249
2
14

I'm afraid this doesn't seem to work. I had a look at the networks tab in the browser dev tools, and the page doesn't even send the request to the backend. – sxz Aug 08 '19 at 11:38
@sxz Does initializeData get called at all? – iepure Aug 08 '19 at 12:38
Yes. I put some logs in there. The method initializeData() gets called, but callToBackend doesn't. – sxz Aug 08 '19 at 12:51
Then I'm guessing there's something wrong with the backend call. Can you post the contents of your initializeData? – iepure Aug 08 '19 at 13:13
Sure, I added them to the main question. Thanks for your efforts so far! – sxz Aug 08 '19 at 13:48
@sxz Hmm, could the problem lie with async forEach? https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop – iepure Aug 08 '19 at 14:14
I think I found the issue. When the for-loop gets called, the applications prop has a length of 0 - they have not been initialized yet. It seems like the applications only get initialized on other pages, and then passed down to my page. This ofc only works when I navigate to them via navbar. Thank you for your help so far! Now I only need to find a solution :/ – sxz Aug 09 '19 at 07:21

Vue.js component not loading/rendering data when called via URL or F5

1 Answers1