问题描述
我有一个属性为 contenteditable="true" 的元素 div.这个 div 的行为就像一个元素 textarea.
<div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div>
我的代码:
data() {返回 {留言:'',}},方法: {enviaMensagem() {控制台.log(this.msg);}}
我的问题是数据绑定不起作用.在 div 中输入的内容不会反映在变量上.有谁知道它可能是什么?
解决方案需要监听元素的变化,因为v-model
只对有效code> 或
.您可以使用
@input
侦听器来执行此操作.
您像这样获得的标记将被转义.如果你想转义它,你可以使用例如这种方法.然后,您实际上在伪文本区域字段旁边有标记.那么,为什么不从一开始就使用 呢?
new Vue({el: '#editor',数据: {留言:''},方法: {打字:功能(el){this.msg = el.target.innerHTML;},提交:函数(){console.log("提交:", this.msg);}}});
.input {显示:内联块;垂直对齐:中间;边框:1px纯黑色;宽度:200px;高度:100px;}.输出 {显示:内联块;垂直对齐:中间;宽度:200px;高度:100px;背景:#eee;}
<script type="text/javascript" src="https://cdnjs.cloudflare/ajax/libs/vue/2.3.3/vue.min.js"></script><div id="编辑器"><div class="input" @input="typing" @keyup.enter="submit" contenteditable="true"></div><div class="output" v-html="msg"></div>
I have an element div with atribute contenteditable="true". This div behaves like an element textarea.
<div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div>
my code:
data() {
return {
msg: '',
}
},
methods: {
enviaMensagem() {
console.log(this.msg);
}
}
My problem is that the databind does not work. What is typed in the div does not reflect on the variable. Does anyone know what can it be?
解决方案You need to listen to changes of the element, because v-model
only works on <textarea>
or <input>
. You can do this by using an @input
listener.
The markup you get like this will be escaped. If you want to unescape it, you can use e.g. this approach. Then, you actually have the markup right next to the pseudo-textarea field. So, why not using a <textarea>
from begin with?
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/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>
这篇关于如何在 v-html 中以两种方式进行数据绑定?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论