Как дождаться загрузки данных для правильного отображения этого условия v-if в Vue. js?

Question

Он показывает, что элементы не найдены до загрузки данных., Код выглядит следующим образом:

<div class="columns" v-if="!products.length">
<p>No items found</p>
</div>
<div class="columns" v-if="products.length">
</div>

    async getProducts() {
      let res = await api.products.getProducts({
        products: products
      })
    },

В настоящее время он показывает, что элементы не найдены, пока данные не загружаются. Как я могу показать это сообщение, только когда данные загружены и они пусты?

Answer 1

Вы можете иметь переменную this.loading = false и переключаться после загрузки.

data() {
  return { loaded = false }
},
methods: {
  async getProducts() {
    let res = await api.products.getProducts({
      products: products
    });
    this.loaded = true;
  },
}

В шаблоне.

<div class="columns" v-if="loaded && !products.length">
  <p>No items found</p>
</div>
<div class="columns" v-if="loaded && products.length"></div>