首页 文章

如何让Vue子组件识别出在Vue $ root组件上完成加载的axios？

提问于
浏览 次
0

我的小Vue应用程序的基本设置遵循基本的Vue Cli 3设置：

  • -main.js（= root）

    • App.vue

  • --- Navigation.vue（这个叫$ root）

在main.js的created（）中有这个函数来加载导航菜单的json：

[...]
data() {
    return {
        navMainItems: null
        staticTestItems: [
            { "id": 0, "title": "test 1, "url": "/" },
            { "id": 1, "title": "test 2, "url": "/" }
        ]
    }
},
created() {
    axios.get('navigation/navAllItems.json')
        .then((response) => {
            this.navMainItems = response.data.navMainItems;
    [...]
}

哪个工作正常 . 现在我想使用“this . $ root”从Navigation.vue组件调用该数据：

data(){
  return {
    navItems: null,
    localStaticTestItems: this.$root.staticTestItems
  }
},
created() {
    // Check if static elements loaded
    console.log("sampleNavItems =", this.$root.sampleNavItems)
},
mounted(){
  // This fails, presumably because of asynchonicity
  // Can this be fixed?
  this.navItems = this.$root.navMainItems
}

虽然静态元素加载完全正常，但异步加载的navItems不会更新 .

我很清楚其他方法，如“事件总线”，“道具”或“VueX”，但是我不想使用带有$ root组件的对话框，并学习如何对异步性做出反应 - 如果是这样的话可能在这种情况下 .

asynchronous vue.js axios vue-reactivity

1 回答

  • 1

    我不是百分百肯定，但在您的情况下，在您的子组件中生成 navItems ，计算属性可能有效：

    computed: {
    navItems() { return this.$root.navMainItems }
  }

    这是一个小例子：http://jsfiddle.net/eywraw8t/268423/

    回复于

相关问题