В событие компонента mounted()
добавить показ прелоадера, запустить методы загрузки данных
убрать прелоадер, когда они завершатся (с помощью Promise.all)
Читать про промисы тут -
https://learn.javascript.ru/promiseПримеры:
один запрос:
mounted() {
this.showPreloader = true
this.$http.get('/someUrl').then(response => {
// данные загружены, убираем прелоадер
this.showPreloader = false
// записываем полученные данные куда-либо
this.someData = response.body
}, response => {
// запрос завершился ошибкой
// показываем сообщение об ошибке
this.showPreloader = false
this.showError = true
});
},
Несколько запросов:
mounted() {
this.showPreloader = true
Promise.all([
this.$http.get('/someUrl'),
this.$http.get('/someUrl2')
]).then(results => {
// данные загружены, убираем прелоадер
this.showPreloader = false
}, response => {
// один или несколько запросов завершились с ошибкой
// показываем сообщение об ошибке
this.showPreloader = false
this.showError = true
});
},
PS. Код справедлив для однофайловых компонентов с использованием Webpack. Используется синтаксис ES6.
Простой
