0👍
✅
You have two options
- Inside your
convertTravelToDrawerElements
method,push
every createdtravel
directly intothis.travelList
instead of replacing it with a new array - Convert
drawerElements
fromdata
into computed property
computed: {
getDrawerElements() {
return [
{
to: '/menu/home',
icon: 'mdi-view-dashboard',
text: 'Home',
},
{
icon: 'mdi-book-multiple',
text: 'Travels',
subLinks: this.travelList,
}
]
}
}
<template>
<v-app>
<app-bar/>
<navigation-drawer :links="getDrawerElements"/>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
</template>
The reason
…your code doesn’t work as expected is because data()
function is called only once when your component is created. At that time, the this.travelList
is empty array. This empty array (or better say reference to the array) is assigned into subLinks
property of the new object the data()
function creates and returns. When you later replace the this.travelList
with a new array, the operation has no effect on the content of subLinks
property, it still contains the reference to the previous (and completely empty) array….
Source:stackexchange.com