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

Question

供参考我正在使用Vue 2.0，Vuex和Firebase。

我正在使用v-html绑定构建一个可满足的组件来呈现innerHTML。数据在KeyUp上更新。每当数据更新时，DOM元素都会刷新“新”数据，导致插入符/光标跳回到可信任div的开头。

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

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

编辑：11/18/16

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

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

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

-

更新：2016年11月29日

此更新有点迟了。我在Github上用Vue记录了feature request。

问题讨论中有一些JSFiddles可以提供potential solution。然而，我认为他们都没有资格作为一个完整的解决方案。唯一有希望的人最近屈服于more issues。

所有这些问题在添加componentShouldRender生命周期钩子时都不会出现问题。我将继续寻找完整的解决方案

Answer 1

  

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

是。 v-once指令就是这样做的。

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

Answer 2

我理解的问题是事件传播或冒泡，所以它使得vue重新渲染div，导致crusor跳转到它的开头。

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

了解更多详情 - vue documentations中的内联处理程序部分中的方法。