v-htmlでのdatabindのやり方は？

Question

私は、属性contenteditable = "true"を持つ要素divを持っています。このdivは要素テキストエリアのように振る舞います。

<div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div> 

私のコード：

data() { 
    return { 
     msg: '', 
    } 
}, 

methods: { 
    enviaMensagem() { 

     console.log(this.msg); 

    } 
} 

私の問題は、データバインドが動作しないということです。 divに入力されたものは変数に反映されません。誰でもそれが何であるか知っていますか？

Answer 1

v-modelは<textarea>または<input>でのみ機能するため、要素の変更を聴く必要があります。これを行うには、リスナー@inputを使用します。

このようなマークアップはエスケープされます。エスケープしない場合は、たとえばthis approach。次に、実際に疑似テキストエリアの横にマークアップがあります。だから、なぜ<textarea>を使って始めないのですか？

new Vue({ 
 
    el: '#editor', 
 
    data: { 
 
    msg: '' 
 
    }, 
 
    methods: { 
 
    typing: function(el) { 
 
     this.msg = el.target.innerHTML; 
 
    }, 
 
    submit: function() { 
 
     console.log("Submitting: ", this.msg); 
 
    } 
 
    } 
 
});

.input { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
.output { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #eee; 
 
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script> 
 

 
<div id="editor"> 
 
    <div class="input" @input="typing" @keyup.enter="submit" contenteditable="true"></div> 
 
    <div class="output" v-html="msg"></div> 
 
</div>