A
A
AleDv2019-10-14 11:18:38
JavaScript
AleDv, 2019-10-14 11:18:38

How to update DOM in Vue?

Hello. There is an array of data that is displayed in a loop, after the button is pressed, data is pulled from the server in the form of components, like this:

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

Each Post-Item component has a simple accordion component.
As a result, this accordion works only on the first elements (rendered from the server), on the rest, which are loaded via AJAX, the accordions no longer work. As I understand it, the problem is that when new Post-Item elements are loaded, the DOM is not updated. Correct me if I'm wrong.
Can you please tell me how to make nested components (accordion) work in elements loaded via AJAX?
UPD. An example for understanding, only instead of posts - tweets, instead of accordion - likes.
For example, we have Twitter. We open the page - there are already some tweets, for example, drawn on the server. Every tweet has a like button.
So, if we continue the analogy with Twitter, then we scroll down the feed, a new batch of tweets is loaded, but in my case, the like button does not work for them.
Processing a like is banal - searching for an element by class when clicked, and then some work. Even the click handler doesn't work.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Y
Yuri Kulaxyz, 2019-10-14
@Kulaxyz

Unfortunately, without reloading the page, this is not possible. Pass raw data from the server in json or as convenient, and write a v-for loop in the parent component itself,
And in data, store the items array, into which you will push new data that came from the ajax request. You need to dig a little deeper into component structure if you want to work with vue

A
Alexander, 2019-10-15
@UPSA

How to update DOM?
Delete (clear) and recreate.
By default, the first elements of Component1 are loaded. Event triggered - new data needed. Replace Component1 with Component2 with the "Loading" splash screen (or the same Component1, but you need to separate the variables somehow) and immediately after the replacement, change it back to Component1 , but Component1 should receive the next batch of data, so you need to provide an AJAX request with a parameter that is stored outside Component1 (some kind of global variable).

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question