Vue.js v-html contenteditable防止dom刷新以防止光标/插入符号跳跃

Question

作为参考,我使用的是Vue 2.0,Vuex和Firebase.

我正在使用v-html绑定构建一个contenteditable组件来呈现innerHTML.数据在KeyUp上更新.每当数据更新时,DOM元素都会刷新"new"数据,导致插入符/光标跳回到contenteditable div的开头.

我已经研究过Rangy和其他一些stackoverflow解决方案,但我觉得最简单的解决方案是从数据刷新中取消绑定DOM元素.我希望数据仍然在firebase中更新,但不会导致元素刷新.

有没有办法让我仍然使用v-html但阻止DOM元素刷新数据？或者有没有另一种方法来呈现HTML而不自动绑定？

编辑:11/18/16

所以我继续努力解决这个问题.这是我目前的想法.

1. 使用生命周期钩子并停止组件重新渲染.我查看了Vue文档,但似乎无法找到阻止循环的东西.
2. 使用React的"componentShouldRender"之类的东西.同样,它看起来并不像Vue.js在生命周期中具有可比较的方法.

如果有人知道任何结束生命周期的方法,停止重新渲染,或者从vue中获取React的"componentShouldRender"功能的方法,这应该足以解决这个问题.

-

更新:11/29/16

这个更新有点迟了.我在Github上用Vue 记录了一个功能请求.

问题讨论中有一些JSFiddles可以提供潜在的解决方案.然而,我认为他们都没有资格作为一个完整的解决方案.最有希望的一个最近产生了更多的问题.

所有这些问题都是添加componentShouldRender生命周期钩子的问题.我将继续寻找完整的解决方案

Answer 1

有没有办法让我仍然使用 v-html 但阻止 DOM 元素用数据刷新？

是的。该v-once指令正是这样做的。

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