Vue中如何为按钮绑定禁用状态直到请求响应返回以防止重复请求

步骤1：修改按钮模板绑定禁用属性 #

你不需要额外新增状态变量，现有代码里的isLoading本身就是请求进行中的标记，可以直接复用绑定禁用属性，修改后的按钮代码如下：

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

说明：isLoading为true时按钮自动进入禁用状态，用户无法点击触发重复请求

步骤2：（可选）优化请求逻辑覆盖校验阶段防重复 #

你现有的sendRequest方法是校验通过后才设置isLoading = true，如果校验过程耗时较长，这段时间用户仍可重复点击。如果需要覆盖这个场景，可以调整方法逻辑，进方法就先设isLoading为true，校验不通过时再重置状态：

sendRequest() {
  // 进方法先设加载状态，避免校验阶段重复点击
  this.isLoading = true
  this.formatError = false;
  this.$validator.validateAll().then(result => {
    if (result) {
      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));
    } else {
      // 校验不通过，重置加载状态恢复按钮点击
      this.isLoading = false
    }
  });
}

如果你的表单校验耗时极短可以忽略这个优化，原方法逻辑也能满足核心防重复需求

内容的提问来源于stack exchange，提问作者Alex