Vue中如何在mounted获取数据后执行需该数据的计算逻辑？

你的问题核心在于computed属性的初始计算时机早于异步请求完成，不过我们可以利用Vue的响应式特性轻松解决这个问题，下面给你几个可行的方案：

方案1：正确利用computed的响应式特性 #

computed属性会自动追踪依赖的响应式数据，当数据更新时自动重新计算。只要你在current_user_has_team里依赖从请求返回的current_user_teams（注意你代码里有个笔误，把同一个response.data.league赋值给了两个变量，应该是接口返回的用户队伍数据），当请求完成赋值后，computed会自动重新计算出正确结果。

首先确保在data中声明响应式变量：

data() {
  return {
    league: null,
    current_user_teams: null
  }
}

然后修改computed属性：

computed: {
  league_id () { 
    return parseInt(this.$route.params.id) 
  },
  current_user_has_team () {
    // 初始数据未加载时返回默认值，避免报错
    if (!this.current_user_teams) return false;
    
    // 这里写你的判断逻辑，比如检查当前用户是否在队伍列表中
    return this.current_user_teams.some(team => team.user_id === this.currentUser.id);
  }
}

修正mounted请求里的赋值笔误：

mounted () {
  const params = {};
  axios.get('/api/v1/leagues/' + this.league_id, { 
    params, 
    headers: { Authorization: "Bearer "+localStorage.getItem('token') } 
  }).then(response => {
    this.league = response.data.league;
    // 假设返回的用户队伍数据是这个字段，根据实际接口调整
    this.current_user_teams = response.data.current_user_teams;
  }).catch(error => {
    this.$router.push('/not_found');
    this.$store.commit("FLASH_MESSAGE", { 
      message: "League not found", 
      show: true, 
      styleClass: "error", 
      timeOut: 4000 
    });
  });
}

这样，初始时current_user_has_team会返回false，当请求完成current_user_teams更新后，computed会自动重新计算，得到正确的结果。

方案2：使用watch监听数据变化 #

如果你的逻辑不需要缓存结果，而是需要在数据加载完成后立即执行某些操作（比如更新状态、触发其他方法），可以用watch监听current_user_teams：

data() {
  return {
    league: null,
    current_user_teams: null,
    hasTeam: false
  }
},
watch: {
  current_user_teams: {
    // 仅当数据变化时执行，初始不触发
    immediate: false,
    handler(newTeams) {
      if (newTeams) {
        this.hasTeam = newTeams.some(team => team.user_id === this.currentUser.id);
        // 这里还可以添加其他需要执行的逻辑
      }
    }
  }
}

方案3：直接在请求回调中执行逻辑 #

如果逻辑只需要在请求完成后执行一次，也可以直接把逻辑写在axios的then回调里：

mounted () {
  const params = {};
  axios.get('/api/v1/leagues/' + this.league_id, { 
    params, 
    headers: { Authorization: "Bearer "+localStorage.getItem('token') } 
  }).then(response => {
    this.league = response.data.league;
    this.current_user_teams = response.data.current_user_teams;
    
    // 直接在这里执行判断逻辑
    this.hasTeam = this.current_user_teams.some(team => team.user_id === this.currentUser.id);
  }).catch(error => {
    // 错误处理
  });
}

为什么你之前的debugger看不到数据？ #

Vue的生命周期中，computed属性会在组件实例创建时就进行第一次计算，这时候mounted还没执行，异步请求还未返回，所以current_user_teams还是null。但当请求完成赋值后，由于current_user_teams是响应式变量，computed会自动重新计算，这时候就能拿到数据了——你可以在computed的逻辑里再打一个debugger，就能看到数据更新后的计算过程。

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