Why does $refs on v-for return an array?

Question

Vue.js

https://github.com/vuejs/vue/issues/4952
In theory, the result should be like this in refs

ref-1: <element>
ref-2: <element>
..

in practice

ref-1: [
 0: <element>
]
ref-2: [
 0: <element>
]
..

<div   :key="index"
                            :ref="`item:${index}`"
                            v-for="(value,index) in listItems"
                    >

Best I've come up with is assigning a different unique ref name for each item in the list like :ref="'option:' + item.id" but that's really gross, especially considering I have to access that ref as element 0 of an array with only one item in it now since the ref is on a v-for.

Why is that?

Answer 1

Because vue is designed that way. There is v-for - so ref will be an array . If you want it to be not an array, use the render function instead of a template .