외부 라이브러리에서 정의되지 않은 속성을 추가할 때 Vue에서 변경 사항을 감지하지 못함

외부 라이브러리에서 정의되지 않은 속성을 추가할 때 Vue에서 변경 사항을 감지하지 못함

양식 렌더러를 만들려고 하는데 양식-콘텐츠 업데이트를 제대로 받는 데 문제가 있어.최소 버전으로 샌드박스를 만들었어: https://codesandbox.io/s/23z4y1n9kp

문제

양식에는 다음과 같은 세 가지 필드가 있다.a,b그리고c. 에 대한 값으로 초기화된다.a을 위한 것b, 그러나 을 위한 것은 아니다.c. 값을 업데이트할 때a또는b, 폼 콘텐트 업데이트도 보이고 콘솔에서 세터 방법이 정확한 값으로 호출되는 것을 본다.그러나 다음 값을 입력할 때c, 페이지에서는 아무 일도 일어나지 않는 것처럼 보이지만, 콘솔은 세터가 올바르게 호출되었음을 나타낸다.이는 문서 개체가 올바르게 업데이트되었지만 Vue는 이를 알지 못한다는 것을 의미한다.

외부 라이브러리가 세터를 호출함

나는 Vue가 정의되지 않은 속성을 보거나 새로운 속성을 감지할 수 없다는 것을 이해한다(https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats).해야 한다Vue.setVue가 그들을 보게끔.그러나 이 경우에는 실제 값 설정을 수행하는 외부 라이브러리를 사용하기 때문에 이 작업이 가능하지 않다.docmod.

나는 당신에게 그것이 무엇을 하는지 알려주기 위해 최소한의 도서관 버전을 샌드박스에 포함시켰다.문서 오브젝트에 필드 값을 추가하는 것은 이 라이브러리 입니다.특정 게이터와 세터들을 이용해서 이렇게 하는데, 나는 그 게터들과 세터들을 잘 보관해서 확실히 해두고 싶다.docmod기대했던 대로 계속 작동하고 있다.

내가 할 수 없는 일들

• 정의c세팅으로documentContent: { value: { a: '1', b: 'foo', c: '' }}. 어떤 속성이 나타날지는 미리 알 수 없다.
• 바꾸다docmod비치할 도서관Vue.set그 안에

가능한 해결책

Vue가 전체 문서 개체를 보고 초기 값이 없는 필드의 변경 사항을 탐지하도록 할 수 있는 방법이 있는가?예를 들어,docmod변경된 내용을 알려 줄 수 있는데, Vue가 어떤 식으로든 페이지를 업데이트하도록 강제할 수 있는가?값의 개체 속성을 다시 정의하여 호출하는 일부 코드로 원래 Getter 및 Setter를 래핑할 수 있는가?Vue.set?

어떤 도움이라도 대단히 감사하다!

전화할 수 있다.this.$forceUpdate();억지로Vue화면을 업데이트하기 위해.이것은 추천하는 방법은 아니지만, 너의 경우 나는 다른 것을 잘 볼 수 없다.

여기에서 업데이트된 버전을 참조하십시오. https://codesandbox.io/s/zk4vy6qly3

나는 방법을 추가했다.refresh당신 안에Form.vue, 에 구속되어 있다.@input당신의 텍스트 박스에 대해.이 방법은 호출한다.this.$forceUpdate();원인이 되다Vue다시 렌더링하다

참조URL: https://stackoverflow.com/questions/52852002/vue-does-not-detect-changes-when-undefined-property-is-added-by-external-library