安装后运行计算功能 - VUE

时间:2018-05-26 23:39:00

标签: javascript vue.js

我正在尝试运行一个需要从挂载方法返回的数据的函数。现在我尝试使用computed来创建函数,但不幸的是,对于这种情况,计算在mounted之前运行,所以我没有我需要的函数。以下是我正在使用的内容:

    computed: {
      league_id () {
        return parseInt(this.$route.params.id)
      },
      current_user_has_team: function() {
        debugger;
      }
    },
    mounted () {
      const params = {};

      axios.get('/api/v1/leagues/' +this.$route.params.id, {
        params,
        headers: {
          Authorization: "Bearer "+localStorage.getItem('token')
        }
      }).then(response => {
        debugger;
        this.league = response.data.league
        this.current_user_teams = response.data.league
      }).catch(error => {
        this.$router.push('/not_found')
        this.$store.commit("FLASH_MESSAGE", {
          message: "League not found",
          show: true,
          styleClass: "error",
          timeOut: 4000
        })
      })
    }

如您所见,我在计算函数debugger中有current_user_has_team函数。但是我需要从axios调用中获得的数据。现在我没有调试器中的数据。我应该使用什么回调,以便我可以利用网络请求返回的数据?谢谢!

2 个答案:

答案 0 :(得分:3)

如果您的计算属性current_user_has_team依赖于在axios调用之后才可用的数据,那么您需要:

  1. current_user_has_team属性中,如果数据不可用,则返回合理的默认值。
  2. 在axios呼叫完成且数据可用之前,请勿从您的模板(限制为current_user_has_team)或其他任何地方访问v-if
  3. 由您决定组件的行为方式" loading"的情况。

答案 1 :(得分:0)

如果您的行为是同步的,则可以使用beforeMount而不是mounted使代码在计算计算的属性之前运行。