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

@Boussadjra的回答有点松散，所以我将分享有关如何完成此操作的完整示例。

我需要更改这些值alertShow successStatus requestMessage，

因此我在这里定义它们：

 data() {
  return {
    alertShow: false,
    successStatus: null,
    requestMessage: '',

，在发送请求并返回肯定的请求后，我相应地更改了数据：

 .then((response) => {     
       // Request Alert Parameters if SUCCESS
              this.successStatus = 'success' 
              this.requestMessage = 'Request was succesfull!'
              this.alertShow = true;

.catch基本相同，但值不同。

Answer 2

下面是带有模拟访存承诺，状态处理程序和计算的警报变量的代码。希望这会有所帮助！

getSubAdminArea()

const vm = new Vue({
  el: '#app',
  data() {
    return {
      isLoading: false,
      showAlert: false,
      isSuccess: false,
      message: ''
    }
  },
  computed: {
    alertVariant() {
      return this.isSuccess ? 'success' : 'danger'
    }
  },
  methods: {
    simulateFetch(p) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (p) resolve('fetch successful')
          else reject('fetch failed')
        }, 1000)
      })
    },
    getResult(p) {
      this.isLoading = true
      // reset statuses
      this.showAlert = false
      this.isSuccess = false
      this.message = ''

      // run simulated fetch with boolean parameter
      this.simulateFetch(p)
        .then(result => {
          // fetch successful
          this.isSuccess = true
          this.message = result
        }).catch(error => {
          // fetch failed
          this.isSuccess = false
          this.message = error
        }).finally(() => {
          // finally
          this.isLoading = false
          this.showAlert = true
        })
    }
  }
})

#app {
  padding: 20px;
}

根据请求成功有条件地呈现b-alert

2 个答案: