Vue.js v-html contenteditable prevent dom refresh to keep cursor / caret from jumping

Question

For reference I'm using Vue 2.0, Vuex, and Firebase.

I am building a contenteditable component using the v-html binding to render the innerHTML. The data is updated onKeyUp. Whenever the data is updated the DOM element refreshes with the "new" data, causing the caret / cursor to jump back to the beginning of the contenteditable div.

I have looked into Rangy and a few other stackoverflow solutions, but I feel the easiest solution would be to unbind the DOM element from the data refresh. I would like for the data to still update in firebase but not result in an element refresh.

Is there a way for me to still use v-html but prevent the DOM element from refreshing with the data? Or is there another way to render the HTML without auto binding?

Edit: 11/18/16

So I’ve continued to work on a fix for this. Here are my current ideas.

1. Use a lifecycle hook and stop component re-render. I’ve looked through the Vue docs but can’t seem to find something to stop the cycle.
2. Use something like React’s “componentShouldRender”. Again, it doesn’t look like Vue.js has a comparable method in the lifecycle.

If anybody knows of any methods to end the lifecycle, stop re-render, or a way to get React's "componentShouldRender" functionality out of vue, that should be enough fix this issue.

-

Update: 11/29/16

This update is a little late coming. I've logged a feature request with Vue on Github.

There are a few JSFiddles in the issue discussion which could provide a potential solution. However none of them I believe qualifies as a complete solution. The only promising one has recently yielded more issues.

All of these problems would be non-issues with the addition of a componentShouldRender lifecycle hook. I will continue to look for a complete solution

Answer 1

Is there a way for me to still use v-html but prevent the DOM element from refreshing with the data?

Yes. The v-once directive does exactly this.

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