Only display the child component once the asynchronous function in the parent's mounted hook has finished executing

Question

Only display the child component once the asynchronous function in the parent's mounted hook has finished executing

In my coding setup, there is a parent component that is responsible for rendering a child component. The challenge I am currently facing involves making an asynchronous call (specifically an axios 'get' request from Vuex actions) inside the mounted hook of the parent component to fetch data required for the child component.

My goal is to delay the rendering of the child component until after this async call has been completed successfully. Does anyone have any suggestions for achieving this in a clean and efficient manner?

javascript vue.js async-await vue-component vuex

Answer 1

Answer №1

v-if

<child v-if="mydata" />

mydata is a data property that starts off as null:

data() {
  return {
    mydata: null
  }
}

Once mydata is populated in the created/mounted lifecycle hook, the child component will be displayed.

async created() {
  const response = await axios // ...
  this.mydata = response.data;
}

EDIT: Based on feedback below. If using Vuex, follow these steps instead:

Continue to use the v-if directive.
Replace the data property with a computed property:

computed: {
   mydata() {
     return this.$store.state.mydata;
   }
}

You can also use mapState for an alternative syntax:

import { mapState } from 'vuex';

computed: {
   ...mapState(['mydata'])
}

Answer 2

v-if

<child v-if="mydata" />

mydata is a data property that starts off as null:

data() {
  return {
    mydata: null
  }
}

Once mydata is populated in the created/mounted lifecycle hook, the child component will be displayed.

async created() {
  const response = await axios // ...
  this.mydata = response.data;
}

EDIT: Based on feedback below. If using Vuex, follow these steps instead:

Continue to use the v-if directive.
Replace the data property with a computed property:

computed: {
   mydata() {
     return this.$store.state.mydata;
   }
}

You can also use mapState for an alternative syntax:

import { mapState } from 'vuex';

computed: {
   ...mapState(['mydata'])
}

Only display the child component once the asynchronous function in the parent's mounted hook has finished executing

Answer №1

v-if

Similar questions

How to send a global variable to an event callback function in JavaScript?

Issue locating the bottom of the scroll bar

Using jQuery to modify the CSS of a div located outside of an iframe

pick out particular values from an array

Creating evenly spaced PHP-generated divs without utilizing flexbox

Limiting the table width in TinyMCE

Discovering the specific element that was clicked from a collection of elements

Leveraging Expressjs to act as a proxy for handling cross-origin requests made via AJAX

Slideshow not displaying properly after an Ajax request due to CSS not being applied

Exploring React's State Management with useState

Could you clarify that for me?

Invoke the render function once more at the highest level while preserving the ability to make changes

The Forge Viewer's getState() function is providing inaccurate values for individual items

What causes an exception when a space bar is recorded during a keypress event?

Consistent value displayed by addEventListener for each event

Is Ajax capable of processing and returning JSON data effectively?

Tips for rendering only the descending portion of a spline in three.js

Is the spread operator in React failing to function as anticipated?

I am looking to retrieve a specific input value from a JSON array using JavaScript

AngularJS Multi-select Dropdown Filter Logic