How to determine which q-expansion-item is open?

Question

I have a q-list with several q-expansion-items as children. The q-expansion-items are assigned to a list, so there is only one open at any given time.

<q-list padding>
    <q-expansion-item 
        id="explore" 
        group="somegroup" 
        icon="explore" 
        label="Explore" 
        default-opened
        @show="switchMode">
            <q-card id="explore-card">
                <q-card-section id="explore-card-section">
                    Item one text
                </q-card-section>
            </q-card>
    </q-expansion-item>
    <q-expansion-item 
        id="identity"
        group="somegroup"
        icon="perm_identity"
        label="Identity"
        @show="switchMode">
            <q-card>
                <q-card-section>
                    Item two text.
                </q-card-section>
           </q-card>
    </q-expansion-item>
</q-list>

I would like to run a Vue method when any q-expansion-item is opened and determine which specific item was opened.

I've tried assigning an id to each q-expansion-item, but need some clunky code to access the ID within the @show event: `

new Vue({
  el: '#q-app',
  data: function () {
    return {}
  },
  methods: {
    switchMode: function (event) {
      console.log(event.target.parentElement.parentElement.parentElement.parentElement.id)
    }
  },
  // ...etc
})

I've also tried using the to property to change the URL fragment, but that doesn't update the URL when the item is expanded (it only updates the URL fragment when clicking on the item title).

How can I determine which q-expansion-item in a group is open at any given time?

Answer 1

You can achieve this without using id's and events. You can use v-model instead.

Example -

    <q-expansion-item
        group="somegroup"
        icon="explore" v-model="selected_model['First']"
        label="First"
        header-class="text-primary"
    >
        <q-card>
            <q-card-section>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </q-card-section>
        </q-card>
    </q-expansion-item>
    
    <q-separator />
    
    <q-expansion-item 
        group="somegroup"
        v-model="selected_model['Second']" 
        icon="perm_identity" 
        label="Second" 
        header-class="text-teal"
    >
        <q-card>
            <q-card-section>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            </q-card-section>
        </q-card>
    </q-expansion-item>

data -

    data(){
        return{
            selected_model:{}
        }
    }

Result-

{ "First": true, "Second": false, "Third": false, "Fourth": false }

Codepen - https://codepen.io/Pratik__007/pen/poymOqm

and if you want First to open default then you can set "First":true in selected_model.