Estoy tratando de hacer un div contenteditable contenido reactivo con párrafos, basado en una matriz de cadenas.
Aquí está mi código.
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> Como puede experimentar si lo prueba: tan pronto como se llama al método de change , el contenido del div editable se concatena con el contenido de los datos en lugar de reemplazarse por completo como me gustaría.
¿Cómo podría hacer para obtener el comportamiento correcto?
Pregunta adicional: ¿podría lograr que sea sincrónico, como con el evento de input sin tener que luchar con la posición del cursor?