@pqgg7nwkd4

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

Добрый день.
Попробую конструктивно:
<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, в проекте своем это компонент и мне нужен доступ не к элементу, а компоненту.

Собственно как сделать это правильно?
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ответы на вопрос 2
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
Используйте индекс в качестве ключа
v-for="(el, i) in elems" :key="i"
Ответ написан
@pqgg7nwkd4 Автор вопроса
Временно сделал так:
let dws = [];
if (this._vnode && this._vnode.children) {
    for (let chVnode of this._vnode.children) {
        if (chVnode.componentInstance) {// В вашем случае может понадобиться более сложный фильтр
            dws.push(chVnode.componentInstance); 
        }
    }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы