2👍
You need to use Promise.all
and run the API call individually with an async function.
this.loading=true;
Promise.all([this.getRequestTypes, this.getReports, this.getQuotes]).then((values) => {
console.log(values);
this.loading = false;
});
The methods should be async.
getReports: async function (date = this.date, requestType = 0) {
await this.$http.get('/reports/month/' + date + '/' + requestType)
.then(function (response) {
}.bind(this))
},
getQuotes: async function (date = this.date2, requestType = 0) {
await this.$http.get('/reports/quote/month/' + date + '/' + requestType)
.then(function (response) {
console.log(response.data)
}.bind(this))
},
getRequestTypes: async function () {
await this.$http.get('/addresses/requesttypesreports')
.then(function (response) {
this.itemsRequestTypes = response.data
}.bind(this))
},
- [Vuejs]-How to declare local property from composition API in Vue 3?
- [Vuejs]-Additional nested <router-view /> does not render view from child route
1👍
You can use Promise.all() using async function
mounted: function () {
this.getAllReports()
},
methods:{
getAllReports: function() {
this.loading = true;
Promise.all([this.getRequestTypes(), this.getReports(), this.getQuotes()])
.then(data => {
// Use data here
this.loading = false;
})
.catch(err => {
// user err to display message
this.loading = false;
});
}
}
And update all three functions like below
//-----------v------------
getReports: async function (date = this.date, requestType = 0) {
this.loading = true
//------v------------
await this.$http.get('/reports/month/' + date + '/' + requestType)
.then(function (response) {
}.bind(this))
},
- [Vuejs]-Separated Vuex for each Vue instance on the page
- [Vuejs]-Quasar\Vue: Unexpected mutation of "amountValue" prop
Source:stackexchange.com