Below is the HTML code I have written.
<div id="app">
<button @click="renderHtml">Click to append html</button>
<div class="flex">
<div class="message" @input="fakeVmodel" v-html="html" contenteditable="true"></div>
<div class="message">{{ html }}</div>
</div>
</div>
Here is the JavaScript part
let app = new Vue({
el: '#app',
data: {
html: 'some text',
},
methods: {
fakeVmodel: function(e){
this.html = e.target.innerText;
},
renderHtml: function(){
this.html += '<img src="https://cdn-images-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
}
}
});
The issue arises when I click the button to add an HTML tag (img) to my variable (html), it works. However, after typing, it removes the inserted tag part. Is there a way to successfully append HTML code in Vue?
Check out the CodePen example provided here