vue.js get innerhtml from contenteditable element on input

Question

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?

Answer 1

Okay short description:

Template:

<div contenteditable="true"
     v-html="myHtmlCode"
     @input="onDivInput($event)">
</div>

Script:

Methods:{
    onDivInput: function(e) {
        this.myHtmlCode = e.target.innerHTML;
        console.log('Text: %o', this.myHtmlCode );
    },
},

Answer 2

Solved it by using event.target.innerText in my vue.js component