[Vuejs]-Vue.js component loads before axios.get()

by

1👍

I am going to assume that this.orders is an array of objects. In that case, you can simply use v-if on Table to mount the component only when this.orders contains some items.

<Table v-if="orders.length" :objects="orders"/>

You could also define the default value for prop objects: this way it won’t be null even if the data is missing.

// Inside Table component
objects: {
  type: Array,
  required: false,
  default: () => [], // default value is an empty array
},
👤3tw

0👍

mounted lifecycle method happens after the component has been mounted, aka when DOM tree has already been created.

What you’re looking for is beforeMount method, which is called after the component has finished setting up reactive state, but DOM nodes haven’t been created yet.

If you call your endpoint inside beforeMount method and await for results, your component will render when the data already exists, on condition that no error was returned.

👤Nikola Gava

0👍

You should not be using the data object ‘orders’ for your axios call. I’m assuming you are using the Options API due to your usage of ‘this’, otherwise I would suggest using ref() or reactive() to update the DOM. In your case, the content is rendering faster than the network response, which is why it shows undefined. You would need to fire your request in a ‘beforeRouteEnter()’ hook, not ‘beforeCreated’.

Consider using this example instead…

export default {
  data() {
    return {
      orders: [],
    };
  },
  methods: {
    async getOrders() {
      const response = await axios.get("url");
      this.orders = response.data.data;
    },
  },
  mounted() {
    this.getOrders();
  },
};
👤Tim

Leave a comment