[Vuejs]-Is it possible to pass array as props after mounted()?

by

0👍

✅

You have two options

  1. Inside your convertTravelToDrawerElements method, push every created travel directly into this.travelList instead of replacing it with a new array
  2. Convert drawerElements from data 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….

Leave a comment