How to navigate to view from list-item level?-CodePudding

I develop Vue2 app using Vuetify. I use router-view to navigate to views. I created navigation drawer where I added groups and subgroups. I created separate views for each subgroup eg. AFRrev.vue for subgroup Revenues, AFRstats.vue for subgroup Stats, same for SFR, CLC etc.. What I want to do is to navigate to specific view when selecting a subgroup. I added picture to show how it looks like now:

The issue is that I need to add route to attribute :to in v-list-item (in subgroup) which refers to the name of the group - and then I will able to create a path string eg. route: this.allGroupItems.text 'rev' should give AFRrev route to AFRrev.vue view. As you can see I try to retrieve name of the route through allGroupItems.text but it doesn't work. And yes, I defined all routes correctly in vue router.

Here are examples of my views:

AFRrev.vue

<template>
    <v-container>
        Some data
    </v-container>
</template>

<script>
export default {

}
</script>

AFRstats.vue

<template>
    <v-container>
        Some edata
    </v-container>
</template>

<script>
export default {

}
</script>

Here is main code:

Drawer.vue

<template>
    <v-navigation-drawer app width="215">

    <v-list>

      <v-list-group
        v-for="item in allGroupItems"
        :key="item.id">
          <template v-slot:activator>
            <v-list-item-title >
              {{ item.text }}
            </v-list-item-title>
          </template>

          <v-list-item
            v-for="item in allSubgroupItems"
            :key="item.id"
            :to="item.route"
            link>
            <v-list-item-content>
              <v-list-item-title> {{ item.text }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>          
      </v-list-group>
    </v-list>
    <v-navigation-drawer>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data () {
      return {
        allGroupItems: [
          { id: 1,  text: "AFR"},
          { id: 2,  text: "SFR"},
          { id: 3,  text: "CBR"},
          { id: 4,  text: "CLC"}
        ],
        allSubgroupItems: [
          { id: 1.1,  text: "Revenues", route: this.allGroupItems.text   'rev' },
          { id: 2.1, text: "Stats", route: this.allGroupItems.text   'stats'  }
        ],
  }
},
}
</script>

How can I refer to group name as to create a route path? Maybe I should refer to component name somehow?

CodePudding user response：

<v-list-item> is nested inside <v-list-group> and therefore you should be able to access the item from <v-list-group> inside <v-list-item>, which would enable you to construct your route properly in the template.

The reason you can't do that is because when you iterate in <v-list-item>, you use the name item again which overrides the item variable from <v-list-group>.

If you rename the item variables to something more descriptive in <v-list-group> and <v-list-item>, you should be able to do something like the following:

 <v-list-group
        v-for="groupItem in allGroupItems"
        :key="groupItem.id">
          <template v-slot:activator>
            <v-list-item-title >
              {{ groupItem.text }}
            </v-list-item-title>
          </template>

          <v-list-item
            v-for="subItem in allSubgroupItems"
            :key="subItem.id"
            :to="groupItem.text   subItem.route"
            link>
            <v-list-item-content>
              <v-list-item-title> {{ subItem.text }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>          
      </v-list-group>