Vue.js v-html contenteditable防止dom刷新以保持遊標/脫字符號跳躍

Question

僅供參考我使用的是Vue 2.0，Vuex和Firebase。

我正在構建一個使用v-html綁定呈現innerHTML的contenteditable組件。數據更新onKeyUp。每當數據更新時，DOM元素將用「新」數據刷新，導致插入/光標跳回到可滿足的div的開始處。

我已經看過Rangy和其他一些stackoverflow解決方案，但我覺得最簡單的解決方案是從數據刷新中解除綁定DOM元素。我希望數據仍然在Firebase中更新，但不會導致元素刷新。

有沒有辦法讓我仍然使用v-html，但是阻止DOM元素刷新數據？或者有沒有另外一種方法來呈現沒有自動綁定的HTML？

編輯：16年11月18日

所以我繼續在此修復工作。這是我目前的想法。

1. 使用lifecycle hook並停止組件重新渲染。我已經瀏覽了Vue文檔，但似乎無法找到停止循環的東西。
2. 使用類似React’s 「componentShouldRender」的東西。再次，它看起來不像Vue.js在生命週期中有一個可比較的方法。

如果有人知道任何結束生命週期的方法，停止重新渲染或從vue獲取React的「componentShouldRender」功能的方法，那應該足以解決此問題。

-

更新：16年11月29日

此更新有點晚了過來。我在Github上用Vue登錄了feature request。

問題討論中有幾個JSFiddles可以提供potential solution。然而，他們中沒有一個我認爲是一個完整的解決方案。最有希望的是最近取得了more issues。

所有這些問題都與增加componentShouldRender生命週期掛鉤無關。我會繼續尋找一個完整的解決方案

Answer 1

問題據我所知是事件propogates或起泡，所以它使vue重新呈現導致crusor跳到它的開始div。

加入event.preventDeafault();行內的setContent()方法在你的小提琴示例中會做的工作。

有關更多詳細信息 - 聯機處理程序中的方法部分vue documentations。

Answer 2

有沒有辦法讓我仍然使用v-html，但是阻止DOM元素刷新數據？

是的。 v-once指令正是這樣做的。

https://vuejs.org/v2/api/#v-once