Getting dynamic $refs value in Vue2

Question

I'm working on a vue application. I have dynamic ref binding for input elements that accept quantity Something like this -

:ref="'qty' + index"

When I log this.$refs, I get all the refs. qty0, qty1, qty2 and so on.

My question is, how do I get the value of a particular input element using the ref?

I cannot hardcode this.$refs.qty0 as the index keeps changing.

I tried

let quantityRef = 'qty' + index;
console.log(index); // 0
console.log(quantityRef); // qty0
console.log(this.$refs.quantityRef); // undefined

Thanks in advance

Thanks, this helped me to find the doc. Just sharing this back for others. components-edge-cases — marlo
– marlo, Commented Oct 1, 2020 at 1:57

Joseph Silber · Accepted Answer · 2018-01-26 00:56:48Z

16

Use a string key directly, with brackets:

this.$refs['qty' + index]

answered Jan 26, 2018 at 0:56

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks alot! Why doesn't the dot syntax work though?

Dot syntax only works with static keys. Dynamic keys always require strings.

@JosephSilber that's true, I can't access the dynamic ref with variable over that syntax. :( this.$refs['slidesref'+ last]