problem binding to multiple editors using vue.js

1

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:

thanks,

2

If I recall correctly, each item needs a “key” so that they can have a “unique identity” rather than be part of a shared pool… something like that.

e.g.

<div v-for="editor_item in editor_list" :key="editor_item.container_id">
  ...
</div>
3

this is not a code mirror problem. Using a textarea as the editor I get the same results. The TEXTAREA elements show the correct value up until I remove the first edit session from the array of sessions. At that point I am expecting VUE.JS to recreate the TEXTAREA according to the V-FOR loop and the data binding. But somehow the remaining TEXTAREA picks up the contents of the removed TEXTAREA.

sorry for the confusion.

here is a new codepen that uses TEXTAREA instead of code mirror:

4

just to explain. Not a codemirror problem at all.

I am binding from an array to the ID attribute of a TEXTAREA. Each item in the array means a TEXTAREA is created on the web page. But I am not binding to the VALUE attribute of the TEXTAREA.

When the first item in the array is removed, VUE rebinds the array to the TEXTAREA elements. What the binding sees is that the ID attribute of each existing TEXTAREA has changed. So those attributes are all changed. But the VALUE attribute is not bound to, so it is not changed. And then, since there is no array element to bind to the last TEXTAREA, that element is removed from the web page.

The end result is a big mess. The code removes the first array item. But VUE binding removes the last TEXTAREA.

this codepen uses mutation observer to show how vue changes the web page when first item in the array is removed.