如何基于API请求状态渲染Bootstrap-Vue的b-alert组件

我来帮你调整代码，搞定这个问题～先给你完整的修正后代码，再拆解说明关键修改点：

<template>
  <div>
    <!-- 根据请求状态动态渲染Alert -->
    <b-alert 
      v-if="requestStatus !== null" 
      :variant="requestStatus ? 'success' : 'danger'" 
      dismissible
      @dismissed="requestStatus = null"
    >
      {{ requestStatus ? 'Request was successful!' : 'Request failed. Please try again.' }}
    </b-alert>

    <!-- 示例提交按钮，根据你的实际页面调整 -->
    <button @click="onSubmit">Check VAT Number</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      requestStatus: null,
      form: {
        country: '',
        VATNumber: ''
      }
    }
  },
  methods: {
    async onSubmit() {
      // 发起请求前重置状态，避免旧提示残留
      this.requestStatus = null;
      try {
        const response = await fetch(`https://vat.erply.com/numbers?vatNumber=${this.form.country}${this.form.VATNumber}`);
        // 结合HTTP状态码判断真实请求结果，而非仅依赖then/catch
        this.requestStatus = response.ok;
      } catch (error) {
        // 捕获网络错误或请求异常
        this.requestStatus = false;
        console.error('Request error:', error);
      }
    }
  }
}
</script>

关键修改点说明： #

1. 控制Alert的显示时机
   用v-if="requestStatus !== null"替代原有的v-model，确保初始加载时（未发起请求）Alert完全不渲染，只有请求完成后（requestStatus变为true/false）才显示。加上@dismissed="requestStatus = null"，可以让用户关闭Alert后重置状态，下次提交请求能重新触发提示。

2. 动态绑定Alert样式
   原代码里的variant="successStatus"是错误写法，Bootstrap-Vue的Alert支持的variant有效值是success、danger、warning等。这里用:variant="requestStatus ? 'success' : 'danger'"，根据请求状态自动切换成功/失败样式。

3. 动态切换提示文本
   通过模板字符串{{ requestStatus ? '成功提示文本' : '失败提示文本' }}，让Alert内容随状态变化，不用写两个重复的Alert组件。

4. 优化请求逻辑
   把原有的.then/.catch换成async/await，代码更简洁易读；同时用response.ok判断请求是否成功（覆盖200-299的HTTP状态码），而不是仅依赖.then（有些API可能返回200但业务状态是错误）。另外在请求前重置requestStatus，避免旧的提示影响新请求。

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