using vue.js, I am able to render two codemirror editors on the same web page. Works well. Problem is, when I click a button to remove one of the editors, vue.js rerenders the page. And the remaining editor incorrectly displays the contents of the removed editor.
vue.js renders the page from an array that contains info on each editor session. Each item in the array contains the ID of the TEXTAREA and code mirror object ( once it is created. )
I use a vue.js v-for loop to render a DIV and TEXTAREA for each editor instance. Then I use the vue $nextTick method to create the code mirror editor object after the TEXTAREA is inserted into the DOM.
This all works. But when an edit session is removed from the array, vue.js rerenders the page. Maybe the DIV and TEXTAREA of the remaining edit sessions are deleted and recreated. Or there is something with the shadow DOM. Just saying everything that should display is displayed. But the problem is the remaining editor on the web page displays the content of the editor that was removed.
How can I troubleshoot this issue? I would like to be able to set a breakpoint and detect when the editor picks up the wrong textarea.
here is the code:
forum-index.html (5.4 KB)
and a codepen: