Currently, I am engrossed in a Vue.js project where my main focus is on executing a series of promises that are interdependent. To simplify this example, I have omitted most of the code and replaced them with console.log statements to display the values I need to retrieve for later use. Once I can successfully make this example work, replicating it for the remaining tasks will be straightforward.
createBuilding: function() {
return new Promise((resolve, reject) => {
if(this.building === 'New building') {
this.$store.dispatch('newBuilding', {
address: this.address,
number_units: this.number_units
})
.catch(err => {
reject(err)
})
resolve(this.$store.getters.buildingID)
} else {
resolve(this.building)
}
})
},
onComplete: async function() {
let buildingID = await this.createBuilding()
console.log(buildingID)
alert('Success');
},
Actual Outcome:
Upon execution, the console.log first displays 'undefined,' followed by the alert pop-up, and then the awaited promise or function appears in the Vue DevTools.
I am seeking assistance on how to effectively obtain and utilize the result from the createBuilding method in conjunction with other methods within my project.