Vue.js에서 Dom에 접근 하는 방법

Vue를 이용해서 Front-End 개발 작업을 진행하다보면 특정 태그의 Dom을 직접 컨트롤 하고 싶을 떄가 있다.

물론 자바스크립트의 querySelector를 이용해서 dom에 접근할 수 있겠지만, 뷰에서도 dom에 접근할 수 있는 방법이 있기 떄문에 vue.js에서 dom에 접근 하는 방법을 정리하려고 한다.

 

일단 다음과 같은 input태그가 있다고 가정했을 때

<input type="password" v-model="password" @keyup.enter="password" placeholder="비밀번호를 입력해주세요">

해당 input태그에서 비밀번호 유효성체크를 하는 과정에서 조건을 만족하지못하면 해당 input태그에 포커싱되게 하고싶다면 태그에 ref속성만 추가해주면 된다. 

<input type="password" v-model="password" @keyup.enter="password" placeholder="비밀번호를 입력해주세요" ref="test">

해당 태그에 ref속성을 추가했다면 스크립트 코드에서는 $refs를 통해 접근하면 되겠다.

// 생략

password : function() {
    alert('비밀번호 유효성체크');
    this.$refs.test.focus();  
}

정리하자면 vue가 MVVM 모델을 지향한다고 해서 dom에 접근할 수 없는 것은아니고 dom에 접근할 수 있는 방법을 제공한다는 것이다. 

또 input tag에 포커싱 이벤트를 사용하고 싶어서 찾아봤는데, 뷰, 리액트 등은 ref태그를 이용해서 돔에 접근해서 포커싱 이벤트를 주는방법 밖에 없는 것 같다.

끝!