如何修改Vue代码：无发票时显示提示，有发票时展示发票

修改思路 #

需要区分加载中、存在发票、未查询到发票三种状态，分别展示对应内容，同时修正原代码中发票存在性的判断逻辑错误。

完整修改代码 #

<template>
  <!-- 存在发票时展示PDF内容 -->
  <v-card-text
    class="elevation-1 mb-1"
    v-for="i in pageCount(invoice)"
    :key="i"
    v-if="hasInvoice"
  >
    <pdf
      style="width: 100%"
      :src="`data:application/pdf;base64,${invoice}`"
      :page="i"
    />
  </v-card-text>

  <!-- 加载中状态 -->
  <v-card-text v-else-if="isLoading">
    <v-skeleton-loader
      class="mx-auto"
      max-width="500"
      type="image, article"
    />
    <span>Please wait....</span>
  </v-card-text>

  <!-- 未查询到发票时展示提示 -->
  <v-card-text v-else>
    <div class="text-center py-4">
      <span>未查询到相关发票信息</span>
    </div>
  </v-card-text>
</template>

<script>
export default {
  computed: {
    invoice() {
      return this.$store.getters["Billing/invoice"];
    },
    isLoading() {
      // 假设store中invoice初始值为null表示加载中，可根据实际业务调整判断逻辑
      return this.invoice === null;
    },
    hasInvoice() {
      // 判断是否存在有效发票数据：非空且不为空白字符串
      return !!this.invoice && this.invoice.trim() !== "";
    }
  },
  methods: {
    pageCount(invoice) {
      // 保留原有的pageCount方法逻辑
    }
  }
};
</script>

关键修改点 #

• 修正发票判断逻辑：将原isInvoice改为hasInvoice，通过!!this.invoice && this.invoice.trim() !== ""准确判断是否存在有效发票数据，避免空字符串或空白内容被误判。
• 拆分状态展示：新增isLoading计算属性区分加载状态，通过v-if/v-else-if/v-else分别处理三种状态的UI展示。
• 新增无数据提示：当确认未查询到发票时，展示清晰的提示信息，替代原有的加载状态。

内容的提问来源于stack exchange，提问作者derick haron