我正在try 运行一个函数,该函数需要从挂载方法中获取一些数据.现在我try 使用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通话中得到的数据.现在我在调试器中没有数据.我应该使用什么样的回调,以便利用从网络请求返回的数据?非常感谢.

推荐答案

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

  1. current_user_has_team属性中,如果数据不可用,则返回一个合理的默认值.
  2. 在axios调用完成且数据可用之前,不要从模板(限制为v-if)或其他任何地方访问current_user_has_team.

这取决于您希望组件在"加载"情况下的行为.

Vue.js相关问答推荐

try 在类星应用程序中使用Vue插件(Vue 3 Mq)-如何配置?

如何禁用Vuetify v—stepper操作按钮

在移动版本中使用标准的 v-data-table

vue3 输入标签给出错误 Vue.use 不是函数

vue 模板中无法识别 pug 语言

v-for 内部的组件

有条件地在 Vue 中添加一个 CSS 类

为什么组件在 v-if 下没有被销毁

Vuex - 如何跨不同选项卡持久存储更新?

Nuxt & Vuetify:如何控制 CSS 文件的加载顺序?

axios.patch / axios.put 在 Vue 和 Laravel 中不起作用

Modal 内部的 Vue.js AJAX 调用

为 webpack HMR Vue.js 包含来自外部项目文件夹的可导入模块

使用 Vue 的点击编辑文本字段

如何从 Vuex 操作访问 Vuex 状态属性?

使用 vuejs 设置响应式屏幕宽度

NPM:403 禁止 - PUT http://registry.npmjs.org/[package-name] - 禁止

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

mount() 仅在组件 Vue.js 上运行一次

Vue-i18n - 无法读取未定义的属性配置