我的小Vue应用程序的基本设置遵循Vue Cli 3的基本设置:
在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组件一起使用,并学习如何对异步产生反应-如果那样的话在这种情况下完全有可能。
答案 0 :(得分:1)
我不确定100%,但是在您的情况下,让子组件中的navItems
可以使用计算属性:
computed: {
navItems() { return this.$root.navMainItems }
}