[Vue] props sync 관련문제, 모달 내에 자식컴포넌트가 있을 때 props sync 가 안되는 문제 다루기

Write with reference to https://ui.toast.com/weekly-pick/ko_20190307

 

 

1. 부모로부터 받아온 props data 를 watch 할 때 감시하고 있는 것이 객체나 배열이라면 내부 속성의 변경여부도 검사한다고 정의해줘야만 watch 에서 감지한다. 아래와 같이 deep : true 로 설정해줘야한다.

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    colours: {
      // This will let Vue know to look inside the array
      deep: true,

      // We have to move our method to a handler field
      handler()
        console.log('The list of colours has changed!');
      }
    }
  }
}

2. 모달 내 자식컴포넌트가 있고, 자식컴포넌트에 전달한 props 의 값이 변경되어도 자식 컴포넌트의 watch에서 데이터 변경여부를 인식하지 못하는 문제가 있었다.

해결방법 : watch에서 제공하는 immediate 속성 사용

 

  watch : {

    imageBase64Props : {
      immediate : true,
      handler( imageBase64Props ) {
        console.log( "watch imageBase64 !!! :", imageBase64Props )

        this.imageBase64 = imageBase64Props;

		//옵션이 적용되어야 옵션에 따른 별개의 컴포넌트가 보여지는 상황
        if( this.imageBase64 && this.imageBase64!= "error" ) {
          this.imageEditOptions.includeUI.loadImage = {
            path : ( this.imageBase64 ),
            name : "image"
          }
        }
      }
    }
  },