Vue_watch에 대하여

프로젝트를 하던 도중 객체배열을 emit과 props로 다른 컴포넌트에 넘기는 경우가 있어서 watch를 이용함

 

처음 객체배열의 값이 들어올 때는 watch가 잘 작동하는 것을 볼 수 있음

 

하지만 객체배열내부의 값이 변경되었을 경우 watch가 작동하지않음...

 

이를 해결하기 위해 구글링 결과 watch의 속성중 속성 내부의 변경을 감지해주는 속성이 있음.

watch - deep 속성

사용 예)

<script>
export default {
  props: ['apt', 'aptCodes', 'isStarview'],
  data() {
    return {
      pageNum: 0,
      pageSize: 3,
      aptlist: [],
      token: localStorage.getItem('key'),
      userid: localStorage.getItem('id'),
    };
  },
  watch: {
    apt: {
      deep: true,
      handler(val) {
        this.aptlist = [];
        axios
          .get(`${SERVER_URL}/map/deal/${val.apt.dong}/${val.apt.aptName}`)
          .then((response) => {
            this.aptlist = response.data;
          })
          .catch(() => (this.errored = true))
          .finally(() => (this.loading = false));
        this.$refs['my-modal'].show();
      },
    },
  },

};
</script>

watch의 deep 속성을 이용하여 객체배열의 내부값의 변경을 감지할 수 있음.