CODEWITHSUNDEEP
vue.js
Pieter
Pieter

Reputation: 135

Vue JS best approach to wait for value in mounted hook

In my Vue component I want to fetch work orders via axios. To do that, I need a user id, which is loaded via a computed property.

Just calling my method 'loadWorkorders' in the mounted lifecycle hook, results in the computed property not being available yet. So I want to check if this computed property is available, if not, just wait a few milliseconds and try again. Repeat the same cycle until it is available.

What is the best approach to handle this? Now I'm just waiting for a second and this seems to work, but I'm looking for a more robust approach.

My code:

    export default {
  name: "MyWorkorders",
  mounted() {
    if (this.user) {
      this.loadWorkorders();
    } else {
      setTimeout(this.loadWorkorders(), 1000);
    }
  },
  data() {
    return {
      workOrders: null,
    };
  },
  methods: {
    loadWorkorders() {
      axios
        .get(`/workorders/load-user-workorders/${this.user.id}`)
        .then((res) => {
          this.workOrders = res.data.workorders;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    user() {
      return this.$store.getters.getUser;
    },
  },
};

Upvotes: 1

Views: 6784

Answers (1)

Rashad Saleh
Rashad Saleh

Reputation: 2847

If you are using Vue 3, consider using Async Components, which are also related to the Suspense built-in component. (at the time of this post, Suspense is an experimental feature, however Async Components are stable)

If you are using Vue 2, take a look at this part of the documentation about handling loading state in Async Components.

If you do not want to invest in these solutions because your use case is very, very simple -- you can try the following simple solution:

<template>
  <template v-if="loading">
    loading...
  </template>
  
  <template v-else-if="loaded">
    <!-- your content here -->
  </template>
  
  <template v-else-if="error">
    error
  </template>
</template>

I have made this runnable example for demonstration. Of course, the templates for loading and error states can be made more complex if required.

Upvotes: 2

Related Questions