在请求成功后有条件地提供b-警报

Question

我正在向可以返回OK状态或Error状态的API发出请求，我想呈现适当的警报，因此，如果状态为OK，我可以显示success-警报，如果不成功，我将显示danger-（基本上是引导标签，如果不成功）

我正在使用bootstrap-vue的b-alert组件。

在页面的初始加载上，我没有任何请求，因此我的requestStatus为null，因为它不存在。向API发送请求后，应将请求更改为true或false。

这是我现在的代码：

     <b-alert  v-model="requestSuccess" variant="successStatus" dismissible>
            Request was successful! 
          </b-alert> 
    </template>

    <script>
    export default {

      data() {
       return{

       requestStatus: null

      },

      methods: {
      onSubmit() {
                     .get(`https://vat.erply.com/numbers?vatNumber=${this.form.country}${this.form.VATNumber}`) // sends request
        // How we handle the response
        .then((response) => {

          // Request was successful -> 200
          this.requestStatus = true 

        }) 
        .catch(response => {


          this.requestStatus = false 

        })

       }
     }
   } 
}

我正在努力在页面上显示失败的警报， 我应该如何去做？

我需要更改的主要内容是variant和警报中的内容

Answer 1

[variant道具应该绑定到字符串类型的属性，具有successStatus值的null强制转换为false，如果具有值，则强制强制转换为true：

  <b-alert  v-model="requestSuccess" v-if="successStatus" :variant="successStatus" dismissible>
            Request was successful! 
          </b-alert> 

在脚本中，根据响应状态分配值success或danger：

  export default {

      data() {
       return{

       requestStatus: null

      },

      methods: {
      onSubmit() {
                     .get(`https://vat.erply.com/numbers?vatNumber=${this.form.country}${this.form.VATNumber}`) // sends request
        // How we handle the response
        .then((response) => {

          // Request was successful -> 200
          this.requestStatus = 'success'

        }) 
        .catch(response => {


          this.requestStatus = 'danger' 

        })

       }
     }
   } 
}