Vue.js v-html contentditable이 커서 새로 고침을 방지하여 커서/캐럿이 점프하지 않도록 유지

Question

참조를 위해 Vue 2.0, Vuex 및 Firebase를 사용하고 있습니다.

innerHTML을 렌더링하기 위해 v-html 바인딩을 사용하여 contenteditable 구성 요소를 작성합니다. 데이터는 onKeyUp에서 업데이트됩니다. 데이터가 업데이트 될 때마다 DOM 요소는 "새"데이터로 새로 고침되어 캐럿/커서가 contenteditable div의 시작 부분으로 다시 이동합니다.

난 Rangy와 몇 가지 다른 stackoverflow 솔루션을 살펴 봤지만 데이터 새로 고침에서 DOM 요소의 바인딩을 해제하는 것이 가장 쉬운 해결책이라고 생각합니다. 데이터가 여전히 firebase에서 업데이트되지만 요소 새로 고침이 발생하지 않도록하고 싶습니다.

v-html을 계속 사용하지만 DOM 요소가 데이터를 새로 고치는 것을 방지 할 수있는 방법이 있습니까? 아니면 자동 바인딩없이 HTML을 렌더링하는 다른 방법이 있습니까?

은 편집 :

11/18/16 그래서 나는이에 대한 수정 작업을 계속했습니다. 여기에 내 현재 아이디어가 있습니다.

1. lifecycle hook을 사용하고 구성 요소를 다시 렌더링하십시오. Vue 문서를 살펴 봤지만 사이클을 멈추는 무언가를 찾지 못했습니다.
2. React’s “componentShouldRender”과 같은 것을 사용하십시오. 다시 말하지만, Vue.js는 라이프 사이클에서 비슷한 메소드를 가지고있는 것처럼 보입니다.

수명주기를 종료하거나 Re-render를 중지하거나 React의 "componentShouldRender"기능을 vue 밖으로 가져 오는 방법을 알고 있다면이 문제를 해결할 수 있습니다.

-

업데이트 : 11/29/16

이 업데이트는 조금 늦게오고있다. Vue on Github와 함께 feature request을 기록했습니다.

potential solution을 제공 할 수있는 몇 가지 JSFiddles가 문제 토론에 있습니다. 그러나 나는 그들 중 누구도 완전한 해결책으로 인정한다고 믿지 않습니다. 유일하게 유망한 것은 more issues입니다.

이러한 문제는 모두 componentShouldRender 라이프 사이클 후크가 추가 되어도 별 문제가되지 않습니다.

Answer 1

내가 이해할 수있는 문제는 이벤트가 전파하거나 거품이 생겨서 vue가 div 시작 부분을 다시 렌더링하도록 만들어서 crusor가 시작 부분으로 점프하게 만드는 것입니다.

event.preventDeafault(); 라인을 setContent() 방법으로 추가하면 작업을 수행 할 수 있습니다.

자세한 내용은 인라인 핸들러 섹션의 메소드 vue documentations에있는 메소드를 참조하십시오.

Answer 2

v-html을 계속 사용하지만 DOM 요소가 데이터를 새로 고치는 것을 방지 할 수있는 방법이 있습니까?

예. v-once 지시문은 정확하게 이것을 수행합니다. smiliar 문제에 대한 검색

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