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