Как реализовать загрузку компонента после http запрса используя vue 2 js?

Question

[akubenov]

Как реализовать подгрузку компонента после завершения http запроса .
по докумнтации пробовал beforeRouteEnter, данные параллельно грузятся

в ангуляре 1ом это реализовывалось при создании rout'a (resolve)

.state('home.citypointDetail', {
      url: "citypoint/:citypointID",
      templateUrl: static + '/citypoint/details.html',
      controller: 'CitypointDetailController',
      resolve: {
        citypoint: function (CitypointService, $stateParams) {
            var id = $stateParams.citypointID;
            return $http.get('/url/', params: {});
        }
      }
    })

Заранее спасибо!

Comments

[Yustas Alexu]

Не знаю как во вью, но думаю так же как в реакте. В реакте это делается через смену стейта после завершения запроса.

Answer 1

[fomenko_alexandr]

Добавьте просто в data переменную, что-то вроде is_loaded: false
И компонент нужный отображайте через v-if="is_loaded"
Соответственно, при удачном запросе меняете is_loaded: true

Comments

[akubenov]

ну так пользователь увидит/перейдет на страницу (компонент) до завершения запроса

[fomenko_alexandr]

akubenov, значит вам нужно почитать про асинхронность, промисы, и как они работают. Потому что vue resource возвращает промис, который позволяет выполнить нужные функции после завершения запроса

Пример из документации:

this.$http.get('/someUrl').then(response => {
       //здесь код выполнится только после успешного запроса
       //вот именно в этом месте и нужно паременной присвоить флаг, что ответ получен
  }, response => {
    // здесь, если запрос по каким-либо причинам не прошел
  });