vue.js - 禁用按钮直到响应 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>