Question

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

-main.js（=根）
-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
}

虽然静态元素加载得很好，但异步加载的navItem却不会更新。

我很清楚其他方法，例如“事件总线”，“ props”或“ VueX”，但我不希望将对话框与$ root组件一起使用，并学习如何对异步产生反应-如果那样的话在这种情况下完全有可能。

Answer 1

我不确定100％，但是在您的情况下，让子组件中的navItems可以使用计算属性：

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

这里有个例子：http://jsfiddle.net/eywraw8t/268423/

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

1 个答案: