Javascript 如何在vueJS中为“我的订单”页面设置应用骨架加载程序和空页面的条件？

我已经应用了骨架加载程序，直到数据加载。但是如果没有数据或者没有订单，我想显示一个空的订单页面。我想知道两种情况下显示装载机和空篮页面的条件。我被困在如何做到这一点。我是vuetify的新手。以下是我的代码：

<template>
  <v-container>
    <div class="text-h2" style="margin-bottom: 20px;">
      Order History
    </div>
<div v-if="orders.length < 1">
  <v-skeleton-loader
      v-for="n in 5"
      :key="n"
      class="flex-row"
      elevation="2"
      max-width="100%"
      style="margin-bottom: 20px"
      transition="scale-transition"
      type="list-item-avatar-three-line"
  >
  </v-skeleton-loader>
</div>
    <v-card
        v-else
      v-for="order in orders"
      :key="order.id"
      class="mx-auto google-font mb-6"
      max-width="auto">
      <v-list-item-content>
        <v-row>
          <v-col cols="10">
            <v-list-item-title class="mb-2 ml-4" style="font-size: 100%; margin-right: 5px"
              >OrderID: {{ order.id }}</v-list-item-title
            >
            <v-list-item-subtitle
              style="color: grey; font-size: 100%;"
              class="ml-4"
              >Items {{ order.ITEMS.length }}</v-list-item-subtitle
            >
          </v-col>
          <v-col cols="2">
            <v-list-item-title
              class="float-right mb-2 mr-6"
              style="font-size: 100%;"
              >₹{{ order.TOTAL_COST }}</v-list-item-title
            >
            <v-list-item-subtitle
              style="color: grey; font-size: 85%;"
              class="mr-6 float-right"
              >{{ parseDate(order.ORDER_DATE) }}</v-list-item-subtitle
            >
          </v-col>
        </v-row>
        <v-divider></v-divider>
      </v-list-item-content>
      <v-btn
        text
        small
        style="margin-bottom: 10px; margin-left: 5px;"
        v-on:click="switchExpand(order.id)"
        :color="getStoreColor"
      >
        Details<v-icon>{{
          expandedItems.indexOf(order.id) > -1
            ? "mdi-chevron-up"
            : "mdi-chevron-down"
        }}</v-icon>
      </v-btn>
    </v-card>
    <v-btn
        outlined
        rounded
        :color="getStoreColor"
        @click="logout">
      Logout
    </v-btn>
  </v-container>
</template> ```

订单历史
OrderID:{{order.id}
项目{order.Items.length}
₹{{order.TOTAL_COST}
{{parseDate（order.order_DATE）}
细节{{
expandedItems.indexOf（order.id）>-1
？“mdi V向上”
：“mdi V形向下”
}}
注销
```

正如您所说，您需要两个条件。 对于骨架装载机，我注意到您的条件是：

v-if="orders.length < 1"

在执行API调用时，应执行以下操作：

methods: {
  async fetchData() {
    this.loading = true // start loading, show the skeleton loader, I know it's ture already, but let's say you will call this more than one time
    const apiRes = await this.myAPICall()
    this.loading = false// loading finished, hide the skeleton loader
  }
}

这样，即使响应为空，加载程序也将隐藏，因为loading属性只检测API调用的加载状态

检查长度是否大于1的条件是不正确的，因为当api响应返回no orders时，它将等于零

现在，让我们进入第二个也是最后一个条件，检测是否有订单，考虑下面的代码：

computed: {
  isItEmptyState() {
    return this.orders.length < 1 && !this.loading
  }
}

---

谢谢。这是可行的。实际上你的逻辑是正确的。不客气！很高兴听到这个消息，别忘了接受答案，兄弟！谢谢你的帮助

computed: {
  isItEmptyState() {
    return this.orders.length < 1 && !this.loading
  }
}

<div v-if="isItEmptyState">whatever placeholder you want</div>