search

vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

Vue loses sync after DOM manipulation #1297

Open dedayoa opened 7 years ago

dedayoa commented 7 years ago

Hello @all, What I did I created a "list" of divs using v-for and all worked great. Using, jQuery's wrapAll, I then wrapped divs 1 - X inside another div (so I can set a max-height and allow overflow-y scroll) - giving the impression that div 0 is fixed. In effect, I modified the DOM generated by v-for. What happened Now, when I act on the data object, it does not sync with my list of divs anymore. By removing the wrapAll, everything works as expected.

Question Is there a way to re-establish sync, after generated DOM has been "externally" modified?

AntBudko commented 7 years ago

Hi. I have the same issue. Is there any workaround?

dedayoa commented 7 years ago

Hi @antbudko. I never found an exact solution in Vue. What I did was add a flag for this "item 0" in my db. That way, I just set a different style based on this flag using CSS+Vue.

With the way VueJs Works - according to the life cycle diagram on https://vuejs.org/v2/guide/instance.html, I doubt what we want will be possible. I guess.

Hope someone with more knowledge can enlighten us further.