contenteditable div HTML要素を追加し、それをVuejsでモデル化します

Question

これは私のHTMLコードです。ここで

<div id="app"> 

    <button @click="renderHtml">clisdfsdfsdfck to appen html</button> 
    <div class="flex"> 
     <div class="message" @input="fakeVmodel" v-html="html" contenteditable="true"></div> 
     <div class="message">{{ html }}</div> 
    </div> 
</div> 

jsの一部である

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>'; 
     } 
    } 
}); 

問題は、私は私の変数（HTML）にhtmlタグ（IMG）をプッシュするボタンをクリックして、それが動作するとき、です。入力後、挿入されたタグ部分は削除されます。 Vueで成功したhtmlコードを追加する方法はありますか？ここで

主な問題codepen例 https://codepen.io/weretyc/pen/EwXZYL?editors=1010

Answer 1

です： HTMLが原因this.html = e.target.innerText;で消えます。代わりに、this.html = e.target.innerHTML;を使用してください。 innerHTMLは完全なHTMLコンテンツを解決します。

二次的な問題：入力した後 、カーソルがdiv要素の開始を焦点を当てています。これは、v-htmlがdivを更新させるためです。

解決するには、v-htmlがフォーカスアウト時にdivを更新することを確認してください。詳細にごntroductionため

全例

let app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    html: 'some text', 
 
    }, 
 
    methods: { 
 
    updateHtml: function(e) { 
 
     this.html = e.target.innerHTML; 
 
    }, 
 
    renderHtml: function(){ 
 
     this.html += '<img src="https://cdn-images-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>'; 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 
<div id="app"> 
 
    
 
    <button @click="renderHtml">click to append html</button> 
 
    <div class="flex"> 
 
     <div class="message" @focusout="updateHtml" v-html="html" contenteditable="true"></div> 
 
     <br> 
 
     <div class="message">{{ html }}</div> 
 
    </div> 
 
</div>