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='item.id' @click='doStuff(item.id)'>
    

    From my doStuff() method, I have:

    this.$refs['003'].expandableItem.show()
    

    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.$refs.003.show 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:

    this.$refs.[yourRef][index].show()

    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