contenteditable div append a html element and v-model it in Vuejs

Question

Here is my Html code.



  
  
      
      {{ html }}

Here is js part

let app = new Vue({
    el: '#app',
    data: {
        html: 'some text',
    },
    methods: {
        fakeVmodel: function(e){
            this.html = e.target.innerText;
        },
        renderHtml: function(){
          this.html += '';
        }
    }
});

The problem is, when I click the button to push a html tag(img) to my variable (html) and it works. but after typing, it will remove the tag part that was insert. Is that any way to append to html code successful in Vue?

Here is the codepen example https://codepen.io/weretyc/pen/EwXZYL?editors=1010

user_1086646 · Answer

The main problem: The html disappears because of this.html = e.target.innerText;. Instead, use this.html = e.target.innerHTML;. innerHTML resolves to the full HTML content.

Secondary Problem: After typing, the cursor focuses the beginning of the div. This is because v-html causes the div to update.

To solve, ensure that v-html only updates the div on focusout.

Full Example

let app = new Vue({
  el: '#app',
  data: {
    html: 'some text',
  },
  methods: {
    updateHtml: function(e) {
      this.html = e.target.innerHTML;
    },
    renderHtml: function(){
      this.html += '';
    }
  }
});



 
  
  
      
      

      {{ html }}

contenteditable div append a html element and v-model it in Vuejs

1 Answers