我有一个属性为 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);
}
}
我的问题是数据绑定(bind)不起作用。 div 中键入的内容不会反射(reflect)在变量上。有谁知道它会是什么?
最佳答案
你需要监听元素的变化,因为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>
关于vue.js - 如何在 v-html 中以两种方式进行数据绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44376484/