Vue js component template not updating with data

0
votes

I have a weird issue in some of my Vue js components, let me explain. I only render my component template after data has been initialised like so:

<template>
  <div>
    <div v-if='!isLoading'> 
      <!-- content -->
    </div>
    <div v-else>...</div>
  </div>
</template>

In the created method of this component, I get some data from the store and set isLoading to false like so.

data() {
  return {
    variable: null,
    isLoading: true,
  }
},
created() {
  this.variable = this.$store.getters['someModule/someGetter']
  this.isLoading = false
}

Here's where the weird behaviour happens. Even though I updated the isLoading variable to false in the created method, the component template is not updating.

When I log the isLoading variable to the console at the end of the created method, it logs false, like i set it. But when I check the isLoading variable in the Vue js tools, it's still set to true...

Lets say this components is rendered in '/content'. This weird behaviour happens when I change routes from '/' to '/content'. When I refresh the app on the '/content' route, this doesn't happen. When I go from '/' to '/other-content' and then to '/content' it also doesn't happen.

Any ideas on why this happens would be greatly appreciated.

Thanks is advance and have a nice day!

2
vue.jsvuejs2vuexvue-router
Can you put a console.log in this created hook and check if it is always called ? – IVO GELOV
Why don't you try using the mounted lifecycle hook instead? – Kelvin Omereshone
Are you fetching data from an API ? async/await would be handy on the created() hook if it's the case. – kissu

2 Answers

0
votes

There are subtle differences between mounted and created in your case since you want to manipulate the DOM, you should use mounted lifecycle hook. This answer would expound on the differences between the two lifecycle methods.

0
votes

This is a working example of what you're trying to do: https://codesandbox.io/s/blissful-field-kjufc?file=/src/App.vue

The interesting part of the code is here:

async created() {
  const response = await fetch("https://jsonplaceholder.typicode.com/photos");
  const json = await response.json();
  console.log("done loading the data");
  if (json) this.isLoading = false;
},

You can go to your network tab and select "slow 3G" to have an emulated slow connection. That way, you will see that the VueJS logo is not displayed until we have fetched all the 5000 photos. enter image description here

If it's not helping, we definitely need more details, like vue devtools debugging or a reproduction.