Vue中如何通过Axios请求返回的布尔值控制按钮禁用状态

数据老陈

2026-10-3

核心问题说明

模板绑定的属性无法直接使用异步函数的返回值，所有async函数的返回值本质都是Promise实例，模板不会自动等待异步请求完成再读取值，因此你之前的写法既拿不到正确的布尔值，还会导致每次视图渲染都重复发起接口请求，存在严重的性能问题。

正确实现步骤

新增响应式状态存储按钮状态
你可以选择给原有validationTasks数组的每一项追加响应式的按钮状态属性，也可以单独创建一个状态数组对应存储每个按钮的禁用、加载状态：

export default {
  data() {
    return {
      // 原有其他数据
      validationTasks: [],
      // 新增状态数组，下标和validationTasks一一对应
      taskBtnStates: []
    }
  }
}

注意如果是给已有的validationTasks元素追加属性，需要使用this.$set()保证新属性是响应式的。

列表加载完成后批量获取按钮状态
在你请求获取validationTasks列表的接口成功回调中，批量调用异步接口获取每个按钮的禁用状态，存入响应式变量：

// 假设fetchTasks是你获取validationTasks的方法
async fetchTasks() {
  const res = await yourTasksApi()
  this.validationTasks = res.data
  // 批量获取每个按钮的禁用状态
  this.taskBtnStates = await Promise.all(
    this.validationTasks.map(async (task) => {
      const disabled = await Util.checkFeatureEnabled(`Validate ${task.productName}`)
      return {
        disabled,
        loading: false
      }
    })
  )
}

修改模板绑定逻辑，直接绑定响应式状态
不要在模板中绑定异步函数，直接使用预存的响应式状态即可：

<v-btn
  medium
  color="white"
  style="overflow: hidden"
  @click="runValidationTaskNow(index)"
  :loading="taskBtnStates[index].loading"
  :disabled="taskBtnStates[index].disabled"
>RUN NOW</v-btn>