Vue Watch가 트리거하지 않음

Vue Watch가 트리거하지 않음

vue watch 메소드를 사용하려고 하지만 일부 개체에는 트리거되지 않는 것 같음deep:true.

내 컴포넌트에서, 나는 다음의 양식을 만들기 위한 필드인 소품으로서 배열을 받는다.나는 양식을 만들고 그것을 동적으로라는 물건에 묶을 수 있다.crudModelCreate그리고 모든 것이 잘 작동한다(vue dev 도구에서 보기도 하고 심지어 계획서에 따라 양식 제출도 한다.

그러나 나는 그 역동적인 물체의 변화를 지켜보려고 하는 데 문제가 있다.

  <md-input v-for="(field, rowIndex) in fields" :key="field.id" v-model="crudModelCreate[field.name]" maxlength="250"></md-input>

   ...

   data() {
      return {
         state: 1, // This gets changed somewhere in the middle and changes fine
         crudModelCreate: {},
      }
   },
   ...
   watch: {
        'state': {
            handler: function(val, oldVal) {
                this.$emit("changedState", this.state);
                // this works fine
            },
        },
        'crudModelCreate': {
            handler: function(val, oldVal) {
                console.log("beep1")
                this.$emit("updatedCreate", this.crudModelCreate);
                // This doesn't work
            },
            deep: true,
            immediate: true
        },
    }

문서로부터

현대 자바스크립트(및 Object.observe의 포기)의 한계로 인해 Vue는 속성 추가나 삭제를 감지할 수 없다.인스턴스 초기화 중에 Vue가 getter/setter 변환 프로세스를 수행하므로 Vue가 이를 변환하고 반응하도록 하려면 속성이 데이터 개체에 있어야 한다.

Depth의 Resactivity(반응도) https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats을 살펴보십시오.

v-model에서 전달되는 개체의 json 문자열을 포함하는 자식 구성 요소에 키 속성을 추가하면 강제로 새로 고침을 수행할 수 있다.

<Component v-model="deepObject" :key="JSON.stringify(deepObject)" />

참조URL: https://stackoverflow.com/questions/46666819/vue-watch-not-triggering