Vue 상세 감시가 개체 속성 변경에 대해 작동하지 않음

Vue 상세 감시가 개체 속성 변경에 대해 작동하지 않음

나는 가지고 있다customer오브젝트를 초기 데이터로 사용합니다.텍스트 필드에는 누군가가 입력하기 시작하면 오브젝트에 다른 키가 추가됩니다.새로운 경우key이 추가되면 워처는 정상적으로 기동되지만 키가 기존 값에서 편집된 경우 워처는 정상적으로 기동하지 않습니다.

그래서 제가 주소를 입력하러 가면key street_address1에 추가됩니다.customer감시자가 발사하도록 하는 거죠그런데 주소 편집을 시작하면 더 이상 안 나와요.

템플릿

<v-container>
  <v-col cols="12">
    <h2>Contact</h2>
    <div>Email Adderss</div>
    <v-text-field
      outlined
      v-model="customer.email"
      >
    </v-text-field>
  </v-col>

  <v-col cols="12">
    <v-row>
      <v-col cols="6">
        <div>First</div>
        <v-text-field
          outlined
          v-model="customer.first"
          >
        </v-text-field>
      </v-col>
      <v-col cols="6">
        <div>Lasts</div>
        <v-text-field
          outlined
          v-model="customer.last"
          >
        </v-text-field>
      </v-col>
    </v-row>
  </v-col>

  <v-col cols="12">
    <div>Shipping Address Line 1</div>
    <v-text-field
      outlined
      v-model="customer.street_1"
      >
    </v-text-field>
  </v-col>

  <v-col cols="12">
    <div>Shipping Address Line 2</div>
    <v-text-field
      outlined
      v-model="customer.street_2"
      >
    </v-text-field>
  </v-col>
</v-container>

대본

data() {
  return {
    customer: {}
  };
},
watch: {
  customer(newData) {
    console.log("test", newData)
  },
  deep: true
},

구문상의 문제입니다.그deep재산이 세컨드 워치인 것처럼 워치 외부에 잘못 배치되어 등록되지 않았습니다.

에 오브젝트 구문을 사용합니다.customerwatch. 오브젝트에는 다음 두 가지 속성이 있어야 합니다.

• a handlermethod(documents에서와 같이 "method"라는 이름을 붙여야 함)
• 그deep소유물

watch: {
  customer: {
    handler (newData) {
      console.log("test", newData)
    },
    deep: true
  }
}

^{또, 이 파일에는,immediate: true필요한 경우 속성watch컴포넌트가 처음 생성될 때 실행됩니다.}

언급URL : https://stackoverflow.com/questions/66374708/vue-deep-watch-not-working-on-object-property-changes