Инициализировать данные Vue с результатом вызова AJAX

Question

Мне нужно инициализировать данные компонента Vue результатом вызова AJAX. Я попробовал следующее:

data: function () {
  return {
    supplierCount: 0
  }
},

created: function () {
  axios.get("/supplier/list").then(response => {    
    this.supplierCount = response.data.length;
  });
}

Однако этот подход не работает, поскольку шаблон может получить доступ к данным до обновления обработчика AJAX supplierCount.

Какой правильный способинициализировать данные результатом асинхронного вызова? Например, если я верну обещание (вместо объекта) из data, будет ли Vue ждать, пока обещание не будет отклонено / разрешено, прежде чем предоставлять данные шаблону?

Answer 1

Отобразите ваш шаблон html условно.

Я считаю, что это лучший способ - ничего не добавляется в DOM, если условие не выполняется.

 <div v-if="supplierCount">

</div>

Answer 2

Я не думаю, что вы можете принудительно инициализировать ваш компонент только после вызова ajax, но вы можете настроить его на скрытие до загрузки данных ajax, либо скрыв его с помощью css (используяv-show) или просто запретив его рендеринг (используя v-if).

Например, вы можете добавить свойство hasLoaded к вашему компоненту и привязать к нему v-show или v-if, вот так:

На вашем js:

data: function () {
  return {
    supplierCount: 0,
    hasLoaded: false
  }
},

created: function () {
  axios.get("/supplier/list").then(response => {    
    this.supplierCount = response.data.length;
    this.hasLoaded = true;
  });
}

На вашем шаблоне:

<!-- The top element is your root element, and you should always render it, so the v-show is appended to the immediate child -->

<div>
    <div v-show="hasLoaded">
        <!-- the rest of your template goes here -->
    </div>
</div>