Ответ 1
Есть ли способ для меня использовать v-html, но не обновлять элемент DOM с данными?
Да. Директива v-once делает именно это.
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. Я продолжу поиск полного решения
Ответы
Ответ 2
Проблема, как я понимаю, в том, что событие propogates или пузыри вверх, поэтому он делает vue re-render div, который заставляет crusor перейти к началу этого.
добавление строки event.preventDeafault(); внутри метода setContent() в вашем примере скрипта будет выполнять эту работу.
для более подробной информации - Методы в разделе Inline Handlers в VUE-документации.