Javascript 挂载（）后是否可以将阵列作为道具传递？

我有一个使用VueJS+Vuetify+Spring的应用程序。我从服务器上得到一个旅行列表，我想在导航抽屉中显示姓名列表。 我创建了一个

travelList

数组，我想在

draurerelations

将它作为道具传递给导航抽屉之前获取这个旅行列表

可能吗？我当前的代码不起作用-可能是我做错了什么，也许有另一种更好、正确的方法

从“@/views/components/AppBar”导入AppBar；
从“@/views/components/NavigationDrawer”导入NavigationDrawer；
从“@/services/travel.service”导入TravelService；
导出默认值{
姓名：“家”，
组件：{AppBar，NavigationDrawer}，
数据（）{
返回{
travelList:[]，
付款人释放：[
{
至：'/menu/home'，
图标：“mdi视图仪表板”，
文本：“主页”，
},
{
图标：“mdi多册”，
文字：“旅行”，
子链接：this.travelList，
}
]
}
},
计算：{
当前用户（）{
返回此。$store.state.auth.user；
}
},
安装的（）{
如果（！this.currentUser）{
这是.$router.push（'/login'）；
}
this.getTravelist（）；
},
方法：{
getTravelist（）{
TravelService.getLoggedUserTravels（）。然后(
响应=>{
这个.convertTravelToDrawerements（response.data）；
}
)
},
转换TravelToDrawerElements（响应）{
让旅行=[]；
response.forEach（元素=>{
让旅行={}；
travel.text=element.name；
travel.to='/trip/'+element.id；
travel.icon=“mdi菜单右键”；
旅行。推（旅行）；
})
this.travelList=旅行；
}
},
}

您有两个选择

在您的

convertTravelToDrawerElements

方法中，

push

将每个创建的

travel

直接放入

this.travelList

，而不是用新数组替换它

将

drawerrelation

从

data

转换为计算属性

计算：{
getdrawerrelations（）{
返回[
{
至：'/menu/home'，
图标：“mdi视图仪表板”，
文本：“主页”，
},
{
图标：“mdi多册”，
文字：“旅行”，
子链接：this.travelList，
}
]
}
}

)被分配到新对象的
subLinks
属性中，
data（）
函数创建并返回新对象。稍后用新数组替换
this.travelList
时，该操作对
subLinks
属性的内容没有影响，它仍然包含对以前（完全为空）数组的引用。…
可以尝试将subLinks更改为函数：
subLinks:function（）{return this.travelList}
@BrandonPratt不幸的是，它不起作用。使用
v-if
怎么样？既然
抽屉关联
是基于
travelList
的，那就让它成为一个计算道具吧。@bbbbb Urton谢谢，我使用了Michal Levy评论中的第二种方式。但我认为你们的想法也行得通。第二种方法解决了我的问题，谢谢！在我问我的问题之前，我试着提出这个解决方案，但它不起作用。很高兴它起了作用。你真的明白为什么你的代码没有按预期工作吗？我不知道我读错了。。。computed中的变量会对更改作出反应并自动重新呈现组件，而data no因此我们需要使用watcher？
data
在Vue中也是直接的。希望我最新的答案能让它更清楚。继续学习！