Vue.js v-html contenteditable 防止 dom 刷新以防止光標/插入符號跳轉

Question

作為參考，我使用的是 Vue 2.0、Vuex 和 Firebase。

我正在使用 v-html 綁定構建一個 contenteditable 組件來呈現 innerHTML。 數據在KeyUp 上更新。 每當更新數據時，DOM 元素都會使用“新”數據進行刷新，從而導致插入符號/光標跳回可內容編輯 div 的開頭。

我研究了 Rangy 和其他一些 stackoverflow 解決方案，但我覺得最簡單的解決方案是從數據刷新中取消綁定 DOM 元素。 我希望數據仍然在 firebase 中更新，但不會導致元素刷新。

有沒有辦法讓我仍然使用 v-html 但阻止 DOM 元素刷新數據？ 還是有另一種方法可以在沒有自動綁定的情況下呈現 HTML？

編輯：11/18/16

所以我一直在努力解決這個問題。 這是我目前的想法。

如果有人知道結束生命周期、停止重新渲染或從 vue 中獲取 React 的“componentShouldRender”功能的任何方法，那應該足以解決這個問題。

-

更新：2016 年 11 月 29 日

這次更新有點晚了。 我在 Github 上使用 Vue 記錄了一個功能請求。

問題討論中有一些 JSFiddles 可以提供潛在的解決方案。 但是，我認為它們都沒有資格作為完整的解決方案。 唯一有希望的一個最近產生了更多問題。

添加componentShouldRender生命周期鈎子后，所有這些問題都不是問題。 我會繼續尋找完整的解決方案

Answer 1

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

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

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

Answer 2

正如@woodberry所建議的，只需將v-once指令添加到內容可編輯 div 即可。 這是一個示例實現：

<div v-once v-html="content" :contenteditable="true" @input="onInput"></div>

然后 onInput() 方法可以處理值的變化：

onInput(event) {

    this.content = event.target.innerText
}

然后將內容設置為反應屬性

data() {
    return {
        content: ''
    }
},

嘗試使用和不使用v-once指令的示例以查看差異。

Answer 3

我理解的問題是事件傳播或冒泡，所以它使得vue重新渲染div，導致crusor跳到它的開頭。

添加event.preventDeafault(); 在你的小提琴例子中的setContent()方法內的行將完成工作。

有關詳細信息 - vue文檔中的內聯處理程序部分中的方法。