Question

我尝试绑定vue.js事件以通过contenteditable = true检测元素的更改。

<div id="test" contenteditable="true" v-on-input="trigger" v-model="test"></div>

这会在我的vue.js vue中触发触发器方法，但我似乎无法获取模型值。

有没有人知道如何在输入事件后获取innerHTML / innerText？

感谢您的帮助！

Answer 1

在我的vue.js组件

中使用<header>解决了这个问题

Answer 2

好的简短描述：

模板：

<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 );
    },
},

Answer 3

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>

Answer 4

仅一行使用@blur代替@input

<h1 contenteditable="true" @blur="test = event.target.innerText">{{test}}</h1>

vue.js从输入中的contenteditable元素获取innerhtml

4 个答案: