CODEWITHSUNDEEP
javascriptvue.js
Zengi
Zengi

Reputation: 131

Vue refs exist but refs[key] is undefined

I have a bunch of dynamically rendered checkboxes using a v-for loop. I set the reference equal to an id specific to that checkbox. In mounted(), I print the references. Then I print reference[id] and I get undefined.

Code:

let id = this.$route.query[key];
console.log(id);
console.log(this.$refs);
console.log(this.$refs[id]);

Result:

Things going wrong

Any idea whats going on here? I know that the references exist because its in mounted and they are printing. If I try changing the reference to equal something else, it still doesn't work. Thanks.

Upvotes: 1

Views: 2133

Answers (1)

Dickson Godwin
Dickson Godwin

Reputation: 123

When using refs with v-for, the component / DOM nodes are stored as an array directly to the variable name

for example 

<list-item
v-for="item in items" 
:key="item.id"
:value="item.value"
ref="items"
/>

Use the refs in your component like this:

this.$refs.items[index]

Upvotes: 2

Related Questions