如何在v-html中做數據綁定？

Question

我有一個元素div與屬性contenteditable =「true」。這個div的行爲像一個元素textarea。

<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>