[ Vue ] data의 객체 안의 특정값 변경을 watch로 감지하기

 

 

watch로 기본형 데이터를 watch로 값 변경을 감지해서 사용한 적은 많은데,

객체 내의 한 특정값 감지 해야하는 상황이 생겨서

그럼 obj.data 이런식으로 선언해서 사용하면 될까?

하다가 찾게된 부분을 정리하려고한다

 

 

객체 안의 특정값 변경을 watch로 감지하기

아래와 같은 데이터를 watch를 사용해 데이터 변경 감지를 한다고 예시를 들자면,

 data

data() {
    return {
      user:{
        name : null,
        age: null,
        type : basicUser
      }
    }
  },

 

위의 data를 예시고

데이터의 단일 값이 아닌 객체의 값을 watch로 변경 감지하는 법은 아래와 같다

 watch 

watch:{
  //데이터의 객체 안의 값 변경을 감지하는 경우
   user: { 
   deep: true,
   handler(){
   	//..실행 할 코드 
      }
    },
  
  //데이터의 객체 안의 특정값 변경을 감지하는 경우
  'user.name'() {
  	//..실행 할 코드 
  }
  //또는
}

 

 

+ )

'user.data'(){ }  ← 이런 형태는 신기했다 따옴표로 감싸준다고???

어쨋든 유용하게 사용해서 이전시간, 이후시간 체크하는 코드를 잘 완성했다 : ) 

완벽하진 않겠지만 나한텐 최선이였다 .. ㅎㅎ

이부분도 다음에 정리해야지🙂

 

 

---

✔︎ 참조

codingcoding.tistory.com/337