Vue.js loses DOM reactivity if element is removed from DOM by browser/user

[aysiscore]

Version

2.6.11

Reproduction link

https://jsfiddle.net/86da2vpu/

Steps to reproduce

To understand this, just type into the div and you will see the <span> tag placeholder will disappear (and be replaced by a <!----> comment) and you can start typing your text. The Content variable will now have your typed text in it.

Then keep deleting the text you typed using the backspace key until all text is gone. Then backspace once more even though the string appears empty to clear out the \n new line character (you can see this in the Vue Content variable's contents).

What happens after the final backspace is that the <p> element also gets deleted from the DOM, as do the <!----> comments, and now the <span> placeholder HTML does not reappear as it should. It seems that if the comments are deleted, then Vue loses all reference to the v-if elements.

What is expected?

Once the text is deleted, the <span> placeholder should reappear.

What is actually happening?

Nothing happens. Vue.js loses interactivity.

---

https://stackoverflow.com/questions/61482260/vue-js-loses-dom-reactivity-if-element-is-removed-from-dom-by-browser-user

[posva]

This is expected: you shouldn't directly modify the rendered HTML by Vue

[aysiscore]

@posva That is not right because it is the normal behaviour of the browser. If you hit backspace it deletes elements. Did you even test it before closing this? Why would Vue.js forget about its Virtual DOM if the browser/user deletes elements from the rendered HTML?

[posva]

Of course I tested it...

When the DOM is modified outside of Vue's control (so to say), it cannot detect the changes and keep up with them. In other words: when using contenteditable, you shouldn't put Vue bindings inside, because you are allowing the user to modify the HTML outside of Vue context.

It's worth noting that contenteditable is not handled by defaut by Vue because it's very complex (#1670)

[aysiscore]

@posva Okay thank you. It would be nice if that caveat could be added to the docs. A lot of social-media sites use contenteditable elements for posting content. It would mean that to use contenteditable we have to go back to jQuery.