vue: 컴포넌트에 전달된 오브젝트를 무효로 만들려면 어떻게 해야 합니까?

vue: 컴포넌트에 전달된 오브젝트를 무효로 만들려면 어떻게 해야 합니까?

코드펜 데모

내 컴포넌트에는 다음 컴포넌트의location로서 반대하다.props제가 넘긴 논쟁은locations[index]에서 선택한 항목입니다.locations어레이를 설정합니다.

단, 컴포넌트는 다음 경우에 반응할 수 없습니다.index바꾸다.데모에서 볼 수 있듯이 버튼을 클릭하면 JSON이 변경되지만 컴포넌트는 갱신할 수 없습니다.

컴포넌트를 반응시키는 가장 좋은 방법은 무엇입니까?

당신의.location컴포넌트에 입력되어 있다.province그리고.city의 데이터 속성mounted후크만언제?location프로포트의 변경,mounted훅이 다시 호출되지 않기 때문에 오래된 데이터가 남습니다.

대신 계산된 속성을 사용합니다.

computed: {
  province() {
    return this.location.province;
  },
  city() {
    return this.location.city;
  }
}

업데이트된 코드펜

만약 당신이 정말로 필요로 한다면province그리고.city데이터 속성(계산 속성이 아님)이 되려면 다음 정보를 확인해야 합니다.locationprop: 속성을 갱신합니다.

data() {
  return {
    province: null,
    city: null
  }
},
watch: {
  location: {
    immediate: true,
    handler(loc) {
      this.province = loc.province;
      this.city = loc.city;
    }
  }
}

소품에 중첩된 항목location반응하지 않고 lodash deepClone과 같은 것을 사용해야 합니다.

<location :location.sync="_.deepClone(loc)"></location>

그게 다야, 감시자나 다른 건 필요 없어

언급URL : https://stackoverflow.com/questions/51054508/vue-how-to-make-the-object-passed-to-component-reactive