【发布时间】：2016-11-17 23:16:47
【问题描述】：
作为参考，我使用的是 Vue 2.0、Vuex 和 Firebase。
我正在使用 v-html 绑定构建一个 contenteditable 组件来呈现 innerHTML。数据在KeyUp 上更新。每当更新数据时，DOM 元素都会使用“新”数据进行刷新，从而导致插入符号/光标跳回可内容编辑 div 的开头。
我研究了 Rangy 和其他一些 stackoverflow 解决方案，但我觉得最简单的解决方案是从数据刷新中取消绑定 DOM 元素。我希望数据仍然在 firebase 中更新，但不会导致元素刷新。
有没有办法让我仍然使用 v-html 但阻止 DOM 元素刷新数据？或者有没有其他方法可以在不自动绑定的情况下呈现 HTML？
编辑：2016 年 11 月 18 日
所以我一直在努力解决这个问题。这是我目前的想法。
- 使用lifecycle hook 并停止组件重新渲染。我浏览了 Vue 文档，但似乎找不到阻止循环的方法。
- 使用类似React’s “componentShouldRender” 的东西。同样，Vue.js 在生命周期中似乎没有类似的方法。
如果有人知道结束生命周期、停止重新渲染的任何方法，或者让 React 的“componentShouldRender”功能脱离 vue 的方法，那应该足以解决这个问题。
-
更新：2016 年 11 月 29 日
此更新来得有点晚。我在 Github 上使用 Vue 记录了 feature request。
问题讨论中有一些 JSFiddles 可以提供potential solution。但是，我认为它们都没有资格作为完整的解决方案。唯一有希望的最近产生了more issues。
添加componentShouldRender 生命周期挂钩后，所有这些问题都不会出现。我会继续寻找完整的解决方案
【问题讨论】：
-
请制作 jsfiddle
-
搜索一个类似的问题，我在文档中找到了这个：vuejs.org/v2/guide/forms.html#lazy 显然您可以将 :lazy 添加到您的 v-model 指令中，以便模型仅更新更改事件。这不是您想要的，但它可能会帮助您处理它
-
@lkostka 实际上是
.lazy。但我试过了，没有任何变化：/ -
Brrrrr 那么我不知道我猜你必须在那里插入一些自定义事件管理。希望更聪明的人发布解决方案。
-
如果它是一个输入，我建议在用一些生命周期钩子刷新 dom 后重新聚焦。不确定“可编辑的 div”是什么。
标签： javascript vue.js contenteditable caret