Discussion icon indicating copy to clipboard operation
Discussion copied to clipboard

Vue loses sync after DOM manipulation

Open dedayoa opened this issue 8 years ago • 2 comments

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?

dedayoa avatar Feb 28 '17 20:02 dedayoa

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

AntBudko avatar Mar 21 '17 08:03 AntBudko

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.

dedayoa avatar Mar 21 '17 13:03 dedayoa