How to get DOM elements in the order in which they visit when using VUE v-for?

Good afternoon.
Try constructively:
<Foo v for="el of elems" :key="el" ref="el">{{ el }}</Foo>


I need to get a list of these Foo-s in the order in which they hatched.
It would seem that this.$refs.el should keep them in the order in which they hatched, but it was not so - the order is not guaranteed. In the documentation about it it is told nothing, only "When ref is used together with a v for ref is an array that contains child components to be displayed from the data source.".

An example illustrating the problem (need to open console on the page, the code in the App.vue):

https://codesandbox.io/s/confident-http-i05jm

In the example, I get several times the div in your project is a component and I need access not to the element and the component.

Actually how to do it right?
April 4th 20 at 13:13
2 answers
April 4th 20 at 13:15
Use the index as the key
v-for="(el, i) in elems" :key="i"
Then when you change the order of items to pressgazette child components, and I need to move exactly the same. - aleen_How commented on April 4th 20 at 13:18
April 4th 20 at 13:17
Temporarily did so:
let dws = [];
if (this._vnode && this._vnode.children) {
 for (let chVnode of this._vnode.children) {
 if (chVnode.componentInstance) {// In your case, you may need a more complex filter
 dws.push(chVnode.componentInstance); 
}
}
}

Find more questions by tags Vue.js