Open Individual Item in Expansion Array

[Julia]

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.

[metalsadman]

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

[Julia]

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!

[metalsadman]

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.