Как обновить DOM во Vue?

Question

[AleDv]

Всем привет. Есть массив данных, которые выводятся в цикле, после по нажитию кнопки подтягиваются данные с сервера в виде компонентов, навроде такого:

<post-item>
   <!-- разметка и данные -->
   <accordion>Данные</accordion>
</post-item>

В каждом компоненте Post-Item есть компонент с простым аккордеоном.

В результате, этот аккордеон отрабатывает только на первых элементах (отрисованных с сервера), на остальных, которые подгружаются по AJAX, аккордеоны уже не работают. Как я понял проблема в том, что при загрузке новых элементов Post-Item DOM не обновляется. Поправьте, если я не прав.

Подскажите, пожалуйста, как заставить работать вложенные компоненты (accordion) в элементах, подгруженых по AJAX?

UPD. Пример для понимания, только вместо постов - твиты, вместо аккорденоа - лайки.

Для примера у нас есть Твиттер. Открываем страницу - там уже есть какие-то твиты, допустим, отрисованые на сервере. У каждого твита есть кнопка лайка.

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

Обработка лайка банальная - поиск элемента по классу при клике и дальше какая-то работа. Даже обработчик клика не срабатывает.

Comments

[Евгений]

Зачем первую порцию рисовать на сервере, а остальные динамически? Рисуйте либо всё динамически, либо всё сервером.

Answer 1

[Юрий Кулаксыз]

К сожалению, без перезагрузки страницы это невозможно. Передавайте с сервера сырые данный в json или как удобно, а в самом родительском компоненте пропишите цикл v-for,

<post-item v-for="(item) in items" :item="item"></post-item>

А в data хранить массив items, в который будете пушить новые данные, пришедшие с ajax-запроса. Вам нужно немного углубиться в структуру компонентов, если хотите работать с vue

Comments

[AleDv]

Это понятно, всё так и делается. Просто в item'e есть ещё вложеный компонент, который не работает после загрузки данных с AJAX.

Для примера у нас есть Твиттер. Открываем страницу - там уже есть какие-то твиты, допустим, отрисованые на сервере. У каждого твита есть кнопка лайка.

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

Обработка лайка банальная - поиск элемента по классу при клике и дальше какая-то работа.

[Юрий Кулаксыз]

Тогда передавайте во вложенный компонент props, а уже в нём определяйте логику через watch.
Почитайте тут https://monsterlessons.com/project/lessons/peredae...

[Юрий Кулаксыз]

Вот ещё по поводу watch:
https://stackoverflow.com/questions/44584292/vuejs...

[AleDv]

Юрий Кулаксыз, проблема в том, что не срабатывает клик по вложенному компоненту

[Юрий Кулаксыз]

киньте код

[Александр]

клик по вложенному компоненту

Смущает подобное выражение. А в каком компоненте ты клик обрабатываешь?

Обработка лайка банальная - поиск элемента по классу при клике

зачем поиск?

[Юрий Кулаксыз]

Может :key забыли?

Answer 2

[Александр]

Как обновить DOM?
Удалить (очистить) и создать заново.
По умолчанию грузиться первые элементы Компонент1. Сработало событие - нужны новые данные. Замени Компонент1 на Компонент2 с заставкой "Загружаюсь" (или тот же Компонент1, но как то надо переменные разделить) и сразу после замены меняй обратно на Компонент1 , но Компонент1 должен получить следующую партию данных, следовательно надо предусмотреть AJAX -запрос с параметром который хранится вне Компонента1 (какая то глобальная переменная).