Есть ли альтернатива querySelectorAll во Vue.js?

Question

[Павел Клешнин]

Собственно, вопрос в заголовке. Для единичного элемента можно использовать $ref, а для нескольких? Неужели ставить каждый раз ref="name1", ref="name2", ref="name3"?? Если элементы отрисовываются не с помощью цикла, это как-то не очень выглядит.

Comments

[Ярослав Иванов]

Во vue не нужны никакие querySelectorAll и ref
Vue - дает архитектуру. Нужно с данными работать а не с элементами.
Читайте документацию. https://ru.vuejs.org/v2/guide/

Answer 1

[Дима Паутов]

Если вы используете querySelectorAll для работы с шаблоном компонента, то похоже вы делаете что-то не правильно.

$ref единственное и по сути правильное получение DOM элемента внутри vue. $ref это по сути id, иных вещей нет, только уже указание селекторов для querySelectorAll.
Если вам приходится каждому элементу DOM давать ref внутри 1го шаблона, то опять же, скорей всего вы что-то делаете не так.

Покажите или расскажите детальнее, какую задачу вы решаете и скорей всего есть решение лучше, нежели то, что вы пытаетесь сделать

Comments

[Павел Клешнин]

Конкретно — мне нужно переделать появление элементов при скролле страницы. Сейчас у нужных элементов стоит класс .animated, когда элемент появляется во вьюпорте (ближе к середине), проигрывается анимация появления. Пока сделал, просто присваивая element.classList.add('.playAnim'), в вотчере скролла при достижении нужного значения, но смотрится, действительно, костыльно и не по-вьюшному. поэтому решил переделать. Ну и задержку анимации проставляю послеждовательно по +0.05s. Бывает, нужно показать 6-8 элементов на одном экране, где уже такой подход ну совсем уж в лоб кажется)

[Дима Паутов]

Павел Клешнин, для такого нужно использовать директивы. Написали 1 раз, а потом просто добавляете её нужным элементам. https://ru.vuejs.org/v2/cookbook/creating-custom-s... - это как пример. Либо поискать готовые https://www.npmjs.com/package/vue-animate-scroll

[Павел Клешнин]

Дима Турков, да, так и впрямь получше смотрится. Спасибо, пойду передлывать)

[Антон Антон]

Павел Клешнин, это ж совсем другое. Тут нужно привязать класс элемента к флагу в данных. В событии, определяющем положение элемента во вьюпорте - устанавливать этот флаг. Для задержки - можно не напрямую устанавливать флаг, а заполнять массив-очередь и запускать обработчик (если он еще не запущен, т.е. если очередь до этого была пустая), который устанавливает флаг у самого старого элемента, ждет пол секунды, устанавливает флаг у следующего, пока очередь не опустеет. После чего он завершает свою работу.

[Дима Паутов]

Антон Антон, ага, вот так вот и делайте в своих проектах, с флагами, массивами, а человек пускай делает правильно

[Антон Антон]

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

[Дима Паутов]

Антон Антон, Если только нужно все анимации делать последовательными. Но такая задача 1 на 100.
Обычно делаю появление элементов при их попадании во вьюпорт. А в вьюпорте может быть несколько свершенно разных элементов. Если на то пошло, то для некоторых элементов в директиву можно передать delay.

Вы предлагаете поочерёдно анимировать элементы относящиеся к 1й группе, тогда вы правы. Нужно просто ждать окончания предыдущей анимации и запускать следующую. А тут во время скролла, от чего я и сказал именно директиву.

Answer 2

[Антон Антон]

https://ru.vuejs.org/v2/guide/components-edge-case...

Когда ref используется вместе с v-for, то ref будет массивом, содержащим дочерние компоненты, отображаемых от источника данных.