Vue 2의 동적 구성요소는 관련 없는 값이 변경되면 해당 값을 잃고 새로 고쳐집니다.

Question

저는 이 문제로 오랫동안 씨름해왔고 거의 버그라고 생각했습니다.

동적 vue 구성 요소를 사용하여 텍스트 본문의 태그를 입력으로 대체하고 있습니다. 예상대로 작동합니다:

으아아아

문제는 관련 없는 값을 변경할 때마다 동적 vue 구성 요소가 새로 고쳐지고 입력한 모든 데이터가 손실된다는 것입니다. 해당 문제의 사본을 여기에 설정했습니다: https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue

보시다시피 아래 선택 입력( period 모델에 할당됨)에서 값을 변경하면 양식의 모든 데이터가 지워집니다

.

또한 데이터를 구성 요소에 바인딩하는 v-model 방법을 시도했습니다. 여기를 참조하세요. https://codesandbox.io/s/vue-2-playground-forked-bt766f?file=/src/App.vue 작동하지만 지금은 입력란에 문자를 입력할 때마다 초점이 흐려집니다

이런 일이 발생하는 이유와 이를 방지하는 방법을 알려주실 수 있나요?

Answer 1

이 공유 링크에 실제로 포크가 변경되었는지 확실하지 않지만 방금 수화물 방법을 계산된 속성으로 변경했는데 지금은 제대로 작동하는 것 같습니다.

https://codesandbox.io/s/pc7q4n

편집

내 변경 사항이 없었던 것 같지만 어쨌든 수화물 방법을 계산 속성으로 승격하고 中使用 this.commitmentTarget 而不是 targetObject >水合物基线问题에 추가했습니다. 더 자세한 내용이 필요하시면 알려주세요!