如何等到数据加载后才能在 Vue.js 中正确显示此 v-if 条件？

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>