Using v-model with contenteditable block

The problem:
I need to use contenteditable block in my component and, as long as I need to reuse it later in lots of places on my app, I need some sort of two-way binding. The common approach to the point is to do something like this, right?
<div contenteditable="true" @input="updateValue($event.target.innerHTML)" v-html="value"></div>

With component like this

export default { props: ['value'], methods: { updateValue (value) { this.$emit('input', value) } } }

Well the problem is that on every change of value v-model changes the value value and causes re-render of the div, thus moving the caret to the beginning of the block. So basically the feature is that you can type from left to right, but it’s the bug as well.

I know that I can use lazy modifier to trace only change events (it may help in my case), but I just wanted to know if there’s a conceptual contradiction between the task and Vue approach.

Thanks in advance!

2 Likes

Same problem, no perfect solution for now~

https://jsfiddle.net/likemusicev/rqv78hkb/ - v-model with contenteditable example without caret trubbles.

1 Like

That doesn’t work because it’s only a v-once. If the HTML changes, it won’t be reflected in the contenteditable