Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm trying to bind a vue.js event to detect a change on an element via contenteditable=true.

<div id="test" contenteditable="true" v-on-input="trigger" v-model="test"></div>
This triggers the trigger method in my vue.js vue, but I can't seem to grab the model value.
Does anyone know how I can grab the innerHTML/innerText after the input event?
    onDivInput: function(e) {
        this.myHtmlCode = e.target.innerHTML;
        console.log('Text: %o', this.myHtmlCode );
                At least in current vue and in at least some browsers, this falsifies "contenteditable" by apparently doing a circular update (first the handler updates the variable and then the v-html updates the content of the div in turn) with the unfortunate side effect that the cursor jumps to an arbitrary position resp. to the beginning of the div.
– TNT
                Sep 18, 2017 at 18:10
                A workaround for most of cases is to listen to the changes on blur event instead of  input. this way you won't have the cursor jump and save changes once editing is done. But in the case you want the live update to change something else then this won't be enough.
– antoni
                Dec 4, 2018 at 22:51
                I have done some experimenting regarding the cursor position of a live updating contenteditable. You can see it here: jsfiddle.net/larsolesimonsen/w2cvpm9u/144 Note that it has not yet been adapted to vue. That work is ongoing :)
– LOAS
                Sep 6, 2019 at 11:01
                can you provide a more detailed example of your component? are you using a watcher? or a computed property with getter/setter?
– ierdna
                Jul 3, 2016 at 12:51
                It would be cool to add some pieces of information and details about what your code does and how it does it to help OP understand why your code could solve his issue.
– Mtxz
                Sep 3, 2018 at 18:17
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.