CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
IvanS95
IvanS95

Reputation: 5742

How to programmatically expand a v-list-group?

I'm currently working on a Vue 2 app which has a sidebar menu, I'm using a v-list-group to display menu items which you can filter using a search field.

I'm trying to expand the filtered menu items to show the search results but I don't know how to set the v-list-group items to expand after I make a search.

Is there a way to set the items to their "open" or "active" state through a method?

Upvotes: 1

Views: 1375

Answers (1)

Alex Gill
Alex Gill

Reputation: 2491

Use the v-model directive to bind the active value for a group.

The value should correspond to a zero-based index.

First group is 0, second group is 1 and third group is 2.

The example below is a bit overkill but should demonstrate the point.

Template:

<v-list-group :key="category.title" no-action v-model="category.active">
  // ...
</v-list-group>

Data:

  data: () => ({
    categories: [
      {
        title: 'Category 1',
        active: false,
        items: [
          {
            title: 'Sub Category 1',
            subactive: false,            
          }
        ]
      },
      {
        title: 'Category 2',
        active: false,
        items: [
          {
            title: 'Sub Category 2',
            subactive: false,            
          }
        ]
      },
      {
        title: 'Category 3',
        active: false,
        items: [
          {
            title: 'Sub Category 3',
            subactive: false,            
          }
        ]
      }
    ],
  }),

Docs: https://vuejs.org/api/built-in-directives.html#v-model

Example: https://codepen.io/alexpetergill/pen/BaPOJYp/dcca9f48d8d3daf072688954e50ea17f

Upvotes: 1

Related Questions