@AleDv

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

Всем привет. Есть массив данных, которые выводятся в цикле, после по нажитию кнопки подтягиваются данные с сервера в виде компонентов, навроде такого:
<post-item>
   <!-- разметка и данные -->
   <accordion>Данные</accordion>
</post-item>


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

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

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

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

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

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

Обработка лайка банальная - поиск элемента по классу при клике и дальше какая-то работа. Даже обработчик клика не срабатывает.
  • Вопрос задан
  • 837 просмотров
Пригласить эксперта
Ответы на вопрос 2
Kulaxyz
@Kulaxyz
Могу лучше
К сожалению, без перезагрузки страницы это невозможно. Передавайте с сервера сырые данный в json или как удобно, а в самом родительском компоненте пропишите цикл v-for,
<post-item v-for="(item) in items" :item="item"></post-item>

А в data хранить массив items, в который будете пушить новые данные, пришедшие с ajax-запроса. Вам нужно немного углубиться в структуру компонентов, если хотите работать с vue
Ответ написан
@UPSA
anykey. Я не программист, я просто ленивый.
Как обновить DOM?
Удалить (очистить) и создать заново.
По умолчанию грузиться первые элементы Компонент1. Сработало событие - нужны новые данные. Замени Компонент1 на Компонент2 с заставкой "Загружаюсь" (или тот же Компонент1, но как то надо переменные разделить) и сразу после замены меняй обратно на Компонент1 , но Компонент1 должен получить следующую партию данных, следовательно надо предусмотреть AJAX -запрос с параметром который хранится вне Компонента1 (какая то глобальная переменная).
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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