CODEWITHSUNDEEP
vue.jsvuetify.js
Alex Hunter
Alex Hunter

Reputation: 260

How to select a v-list-group child in vuetify?

Im trying to get the value of any sub item that i select, this is possible natively with vuetify?. I tried using sub-group but i think i dont how to use it, any idea on how to solve this problem?

    <v-list>
    <v-subheader>Categories</v-subheader> 

    <v-list-group v-for="item in items" :key="item.title" v-model="item.active" :prepend-icon="item.action" no-action sub-group>
        
        <template v-slot:activator>

            <v-list-item-content>

                <v-list-item-title v-text="item.title"></v-list-item-title>

            </v-list-item-content>

        </template>

        <v-list-item v-for="child in item.items" :key="child.title" sub-group>

            <v-list-item-content>

                <v-list-item-title v-text="child.title"></v-list-item-title>

            </v-list-item-content>

        </v-list-item>

    </v-list-group>

</v-list>

This is the image ( i want make selectable like the parent List item 1)

enter image description here

This is the data array with data thats rendered

    data: () => ({
    items: [
    {
      action: 'mdi-ticket',
      items: [{ title: 'List Item 1' },{ title: 'List Item 2' },{ title: 'List Item 3' }],
      title: 'Attractions',
    },
    {
      action: 'mdi-silverware-fork-knife',
      items: [
        { title: 'Breakfast & brunch' },
        { title: 'New American' },
        { title: 'Sushi' },
      ],
      title: 'Dining',
    },
    {
      action: 'mdi-school',
      items: [{ title: 'List Item' }],
      title: 'Education',
    },
    {
      action: 'mdi-run',
      items: [{ title: 'List Item' }],
      title: 'Family',
    },
    {
      action: 'mdi-bottle-tonic-plus',
      items: [{ title: 'List Item' }],
      title: 'Health',
    },
    {
      action: 'mdi-content-cut',
      items: [{ title: 'List Item' }],
      title: 'Office',
    },
    {
      action: 'mdi-tag',
      items: [{ title: 'List Item' }],
      title: 'Promotions',
    },
  ],
}),

Upvotes: 1

Views: 5253

Answers (1)

Jorge Ramirez
Jorge Ramirez

Reputation: 98

Try adding the link attribute to v-list-items and wrapping them in a v-list-item-group

Edit with the modification:

It is enough to wrap your sublist items in a v-list-item-group:

<v-list>
<v-subheader>Categories</v-subheader> 

<v-list-group v-for="item in items" :key="item.title" v-model="item.active" :prepend-icon="item.action" no-action sub-group>
    
    <template v-slot:activator>

        <v-list-item-content>

            <v-list-item-title v-text="item.title"></v-list-item-title>

        </v-list-item-content>

    </template>
    
    <v-list-item-group class="pl-10">

        <v-list-item v-for="child in item.items" :key="child.title" sub-group>

            <v-list-item-content>

                <v-list-item-title v-text="child.title"></v-list-item-title>

            </v-list-item-content>

        </v-list-item>

    </v-list-item-group>

</v-list-group>

I've added the class="pl-10" to preserve the tabulation of subitems.

I hope you find this useful and also recommend you to check out the v-treeview component, it is helpful for more levels of nesting and is highly configurable.

Upvotes: 3

Related Questions