web-dev-qa-db-ja.com

vue.jsは、入力時にcontenteditable要素からinnerhtmlを取得します

Contenteditable = trueを介して要素の変更を検出するために、vue.jsイベントをバインドしようとしています。

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

これにより、vue.js vueのtriggerメソッドがトリガーされますが、モデル値を取得できないようです。

入力イベントの後にinnerHTML/innerTextを取得する方法を知っている人はいますか？

助けてくれてありがとう！

contenteditablevue.js
7
Jorre

私のvue.jsコンポーネントでevent.target.innerTextを使用して解決しました

7
Jorre

簡単な説明：

テンプレート：

<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 );
    },
},
5
Markus Lenz
_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>
1
user4523897

1行は@inputの代わりに@blurのみを使用します

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

0
Martin Prestone