我尝试通过contenteditable=true绑定一个vue.js事件来检测元素的变化。
<div id="test" contenteditable="true" v-on-input="trigger" v-model="test"></div>
这触发了我的vue. jsvue中的trigger方法，但我似乎无法获取模型值。有人知道如何在input事件之后获取innerHTML/innerText吗？
hrirmatl1#
OK简短描述：模板：
<div contenteditable="true" v-html="myHtmlCode" @input="onDivInput($event)"> </div>
脚本：
methods: { onDivInput: function(e) { this.myHtmlCode = e.target.innerHTML; console.log('Text: %o', this.myHtmlCode ); }, },
bvjveswy2#
在我的vue.js组件中使用event.target.innerText解决了这个问题
event.target.innerText
tcomlyy63#
export default { data() { return { content: null } }, methods: { onFocusOut: function(e) { this.content = e.target.innerHTML } } }
<div contenteditable="true" v-html="content" @focusout="onFocusOut($event)"></div>
unguejic4#
一行仅使用@blur而不是@input<div contenteditable="true" @blur="test = $event.target.innerText">{{test}}</div>
<div contenteditable="true" @blur="test = $event.target.innerText">{{test}}</div>
4条答案
按热度按时间hrirmatl1#
OK简短描述：
模板：
脚本：
bvjveswy2#
在我的vue.js组件中使用
event.target.innerText解决了这个问题tcomlyy63#
unguejic4#
一行仅使用@blur而不是@input
<div contenteditable="true" @blur="test = $event.target.innerText">{{test}}</div>