vue 请求时禁用按钮返回时解除

在Vue中，可以通过两种方法实现请求时禁用按钮，返回时解除按钮禁用的效果。

第一种方法是使用v-bind指令绑定按钮的disabled属性和一个数据属性，当发起请求时将该数据属性设置为true，从而禁用按钮，当请求返回时将该数据属性设置回false，解除按钮禁用。示例代码如下：

<template>
  <div>
    <button :disabled="isFetching" @click="fetchData">请求数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFetching: false
    };
  },
  methods: {
    fetchData() {
      this.isFetching = true;
      // 发起请求
      // 请求返回时将this.isFetching设置为false
    }
  }
};
</script>

第二种方法是使用一个计算属性来判断请求状态，然后在模板中根据计算属性的值来决定按钮是否禁用。示例代码如下：

<template>
  <div>
    <button :disabled="isFetching" @click="fetchData">请求数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      // 其他数据属性
    };
  },
  computed: {
    isFetching() {
      // 根据请求状态返回一个布尔值
      // 比如可以通过判断dataList是否为空来确定请求是否完成
      return this.dataList.length === 0;
    }
  },
  methods: {
    fetchData() {
      // 发起请求
      // 请求返回时更新this.dataList的值
    }
  }
};
</script>

以上两种方法都可以实现请求时禁用按钮，返回时解除按钮禁用的效果，具体使用哪种方法取决于你的代码结构和需求。