I'm trying to make a reactive contenteditable div with paragraphs, based on a String array.
Here is my code.
Vue.createApp({
data() {
return {
content: ["Paragraph 1", "Paragraph 2"],
}
},
methods: {
change(e) {
this.content = [...e.target.children].map(c => c.innerText);
}
}
}).mount('#app');.editor {
outline: 2px solid blue;
border-radius: 2px;
min-width: 50px;
min-height: 1em;
}
.editor>p {
background: #ddd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js"></script>
<div id="app">
<div :contenteditable @blur="change" ref="editor" class="editor">
<p v-for="(part, id) in content" :key="id">
{{ part }}
</p>
</div>
</div>As you may experience if you try it: as soon as the change method is called, the content of the editable div is concatenated with the content of the data instead of being all replaced like I would like it to.
How could I do to get the right behaviour ?
Bonus question : could I manage to make it synchronous, like with the input event without having to struggle with the cursor position ?