参照のために、Vue 2.0、Vuex、およびFirebaseを使用しています。Vue.js v-html contenteditableは、カーソル/キャレットがジャンプするのを防ぐために、DOMリフレッシュを防止します。
私は、innerHTMLをレンダリングするためにv-htmlバインディングを使用してcontenteditableコンポーネントを構築しています。データはonKeyUpで更新されます。データが更新されるたびに、DOM要素が「新しい」データでリフレッシュされ、キャレット/カーソルがコンテンツ編集可能なdivの先頭にジャンプします。
私はRangyと他のいくつかのスタックオーバーフローソリューションを調べましたが、データリフレッシュからDOM要素をバインド解除するのが最も簡単な解決策になると思います。データがfirebaseで更新されますが、要素リフレッシュは発生しません。
私はまだv-htmlを使用しますが、DOM要素がデータでリフレッシュされないようにする手段はありますか？または、自動バインディングなしでHTMLをレンダリングする別の方法がありますか？
編集：11/18/16
だから私は、このための修正に取り組み続けてきました。ここに私の現在のアイデアがあります。
- lifecycle hookを使用してコンポーネントを再レンダリングします。私はVueのドキュメントを見てきましたが、サイクルを止める何かを見つけることができないようです。
- React’s “componentShouldRender”のようなものを使用してください。繰り返しますが、Vue.jsにはライフサイクルに匹敵するメソッドがあります。
ライフサイクルを終了する方法、再レンダリングを停止する方法、またはReactの「componentShouldRender」機能をvueから外す方法を知っている人は、この問題を修正するだけで十分です。
-
更新：11/29/16
このアップデートは少し遅れて来ています。私はVue on Githubでfeature requestを記録しました。
問題のディスカッションには、potential solutionというJSFiddlesがいくつかあります。しかし、私は完全な解決策と見なされます。唯一有望なのは最近more issuesです。
ライフサイクルフックcomponentShouldRenderを追加することで、これらの問題はすべて解決します。私は完全な解決策を探し続ける
作るjsfiddle plsは – euvl
が、私はドキュメントでこれを見つけた：https://vuejs.org/v2/guide/forms.html#lazyは明らかにあなたが追加することができます怠惰にごモデルが変更イベントでのみ更新されるように、v-modelディレクティブを使用します。それはあなたが探しているものではありませんが、あなたがそれを扱うのを助けるかもしれません。 – lkostka
@lkostkaそれは実際には '.lazy'です。しかし私は変更なしでそれを試しました：/ – Jason