disable button until response VUE-CodePudding

Button:

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

method:

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));
    }
  });
}

We need to hang disable on the button until we get an answer. (to prevent multiple requests)

I can't figure out how to hang disable. Right after sendRequest() { i need something like this.BTN = disableTrue , and when i got answer, in .then i need to change this.BTN = disableFalse? But how can I get the button to control disable?

CodePudding user response：

Try

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