Как правильно получить DOM элементы в том порядке в котором они на странице при использование VUE v-for?

Question

[pqgg7nwkd4]

Добрый день.
Попробую конструктивно:

<Foo v-for="el of elems" :key="el" ref="el">{{ el }}</Foo>

Мне нужно получить список этих Foo-ов в том порядке, в котором они вывелись.
Казалось бы, this.$refs.el должен содержать их в том порядке в котором они вывелись, но оказалось это не так - порядок не гарантируется. В документации про это ничего не сказано, лишь "Когда ref используется вместе с v-for, то ref будет массивом, содержащим дочерние компоненты, отображаемых от источника данных.".

Иллюстрирующий проблему пример (нужно открыть консоль на странице, код в файле App.vue):

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

В примере я вывожу несколько раз div, в проекте своем это компонент и мне нужен доступ не к элементу, а компоненту.

Собственно как сделать это правильно?

Answer 1

[Alex]

Используйте индекс в качестве ключа
v-for="(el, i) in elems" :key="i"

Comments

[pqgg7nwkd4]

Тогда при изменении порядка элементов пересоздадуться дочерние компоненты, а мне нужно чтобы перемещались ровно те.

Answer 2

[pqgg7nwkd4]

Временно сделал так:

let dws = [];
if (this._vnode && this._vnode.children) {
    for (let chVnode of this._vnode.children) {
        if (chVnode.componentInstance) {// В вашем случае может понадобиться более сложный фильтр
            dws.push(chVnode.componentInstance); 
        }
    }
}