Open Individual Item in Expansion Array

  • This should be straight-forward, but for some reason it’s not working. I have an expansion item:

    <q-expansion-item :ref='' @click='doStuff('>

    From my doStuff() method, I have:


    The $refs work fine and I can target ref ‘003’ from other functions in my code so I know there’s nothing wrong with the $refs. But when I try to target the expandableItem element to open it programmatically, I get: Cannot read property 'show' of undefined" every time.

    Is there another name for expandableItem that I should be targeting or is there some other issue that I’m missing here? Please help.

  • @Julia loose theexpandableItem like so this.$refs['003'].show(). Youre already targeting the element which you assigned your ref on.

  • Dear @metalsadman. Thank you for your reply. At first when I tried your suggestion, I got the error "TypeError: this.$ is not a function".

    Then I realized that the expansion item is within an array of expansion items. So, targeting it also requires an index number within the array. After I added “0” as the index it worked!

    For others who run into this issue, here’s what targeting an array of expansion items should look like:


    Thanks again!

  • Yes thats what refs behavior when inside a v-for and using same name, i would try to make them unique so its easier to target specific element.

Log in to reply