Как условно отобразить данные в Vuejs

Question

Я должен отобразить возвращенные данные API или сообщение об отсутствии данных. Ниже приведен мой код в Vuejs:

<div v-if="resp.length > 0">
    <div>data displayed here from api</data>
</div>
<div v-else>
    No Data
</div>

Другой подход, который я попробовал:

<div v-show="resp.length > 0">
    <div>data displayed here from api</data>
</div>
<div v-show="resp.length === 0">
    No Data
</div>

Независимо от того, возвращает ли API данные или нет, вначале отображается «Нет данных». Если API возвращает данные, «Нет данных» исчезает и отображаются фактические данные. Если нет данных из API, «Нет данных» остается.

Данные API загружаются в метод жизненного цикла beforeMount (). Любая подсказка, как справиться с этим? Цените ваши усилия.

Answer 1

изначально установить значение по умолчанию false для isLoaded, после загрузки данных API изменить значение isLoaded на true

<div v-if="isLoaded">
 <div v-if="resp.length > 0">
    <div>data displayed here from api</data>
 </div>
 <div v-else>
    No Data
  </div>
</div>
<div v-else>
Loading
</div>