[Vuejs]-Computed value in VueJs – usage in asynch call

by

1👍

If I understand correctly you want to execute the async method only when the calcTheArray has actually some value computed and prevent the undefined error. You can use a watcher to trigger the async function in that case, you could try the following:

computed: {
    calcTheArray() {
        // your code to create the array;
        return array;
    }
},
watch: {
    calcTheArray() {
        // executed when there's any mutation detected by vue on calcTheArray;
        this.asyncData(object)
    }
},
methods: {
    async asyncData({ error, app, }) {
      try {
         // lots of things happen here, another api call, some parsing etc.

         const promises = [];
         this.calcTheArray.forEach((value) => {
            promises.push(app.$axios.$get(`${value}`, { useCache: true }));
         });
       } catch (e) {
         console.log(e);
         return error({ statusCode: 500, message: e.message });
       }
   }
}

This way, vue will wait to the computed array before start the async method. Hope it suits you well.

👤Kenny Aires

Leave a comment