Ожидание вызова API перед продолжением отображения компонента

Question

Я использую axios для вызова API.Вызов происходит, когда мышь вводит определенные элементы HTML на странице.Как правило, при первом наведении мыши данные не принимаются, но на втором данные обычно появляются.Я полагаю, что это потому, что я не жду возврата вызова API.Есть ли способ реализовать это?

Ниже приведен пример Axios, который я использую для вызова API.

Спасибо за время и внимание.

instance
.get('observations?patientId=37')
.then((response) => {
   this.clinicaltabs[0].title = response.data.data;
});

Answer 1

Что бы я сделал:

Используйте загрузку блесны для элемента HTML, который вы хотите найти, и сделайте его видимым при отправке запроса.

this.loading = true; //Some way for disabling the hover event

instance
.get('observations?patientId=37')
.then((response) => {
   this.clinicaltabs[0].title = response.data.data;
})
.finally(() => this.loading = false);

Тогда вы можете использовать v-if="loading"или что-то вроде управления отображением компонента до его загрузки.