Vue.js v-html contenteditable предотвращает обновление дома, чтобы держать курсор/карет от прыжков

Для справки я использую Vue 2.0, Vuex и Firebase.

Я создаю контент-составляющий компонент, используя привязку v-html для рендеринга innerHTML. Данные обновляются вKeyUp. Всякий раз, когда данные обновляются, элемент DOM обновляется с помощью "новых" данных, заставляя курсор/курсор возвращаться к началу содержимого, доступного для контента.

Я просмотрел Rangy и несколько других решений stackoverflow, но я считаю, что самым простым решением было бы отвязать элемент DOM от обновления данных. Я хотел бы, чтобы данные все еще обновлялись в firebase, но не приводили к обновлению элемента.

Есть ли способ для меня использовать v-html, но предотвращать обновление DOM-элемента данными? Или есть другой способ визуализации HTML без автоматической привязки?

Изменить: 11/18/16

Итак, Ив продолжал работать над исправлением этого. Вот мои текущие идеи.

  • Используйте привязку жизненного цикла и прекратите повторное рендеринг компонентов. Я просмотрел документы Vue, но, похоже, не нашел что-то, чтобы остановить цикл.
  • Используйте что-то вроде Реагирует "componentShouldRender" . Опять же, это не похоже, что Vue.js имеет сопоставимый метод в жизненном цикле.

Если кто-нибудь знает какие-либо методы для завершения жизненного цикла, прекратите повторную визуализацию или способ получить функциональность React "componentShouldRender" из vue, этого достаточно, чтобы исправить эту проблему.

-

Обновление: 11/29/16

Это обновление немного поздно. Я зарегистрировал запрос с Vue на Github.

В обсуждении проблем есть несколько JSFiddles, которые могут предоставить потенциальное решение . Однако ни один из них, я считаю, не является полным решением. Единственный многообещающий недавно дал больше вопросов.

Все эти проблемы были бы без проблем с добавлением крюка componentShouldRender lifecycle. Я продолжу поиск полного решения

Ответ 1

Есть ли способ для меня использовать v-html, но не обновлять элемент DOM с данными?

Да. Директива v-once делает именно это.

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

Ответ 2

Проблема, как я понимаю, в том, что событие propogates или пузыри вверх, поэтому он делает vue re-render div, который заставляет crusor перейти к началу этого.

добавление строки event.preventDeafault(); внутри метода setContent() в вашем примере скрипта будет выполнять эту работу.

для более подробной информации - Методы в разделе Inline Handlers в VUE-документации.