禁用按钮直到响应 VUE

Question

按钮：

<v-button
    class='btn'
    :isLoading='isLoading'
    @click.prevent='sendRequest'
  >
    Search
</v-button>

方法：

sendRequest() {
  this.formatError = false;
  this.$validator.validateAll().then(result => {
    if (result) {
      this.isLoading = true;
      request
        .get('/api/shop/search', { params: { q: this.queryString } })
        .then(res => {
          this.isLoading = false;
          if (res.data) {
            this.$emit('ReceivedResponse', res.data);
          }
        })
        .catch(() => (this.isLoading = false));
    }
  });
}

我们需要在按钮上挂起禁用，直到我们得到答案。（防止多次请求）

我不知道如何挂起禁用。在 sendRequest() { 之后我需要像 this.BTN = disableTrue 这样的东西，当我得到答案时，在 .then 我需要改变 this.BTN = disableFalse？但是我怎样才能让按钮控制禁用？

Answer 1

尝试

    <v-button
       class='btn'
       :disabled='isLoading'
       @click='sendRequest'
  >
    Search
</v-button>

禁用按钮直到响应 VUE

disable button until response VUE

vue.js

axios

vuejs2