내가 의도한 것은...
인증번호 발송 버튼 클릭 후 하단 인증번호 입력 창에 focus() 넣기였다..
단순하게 인증번호 발송 함수 마지막에 넣어보자.
sendAuth() {
...
this.$refs.certificationNum.focus();
// 이렇게 마지막에 node.focus()를 했더니 동작 안함
}
watch로 isSentCertificationNum(인증번호 발송 버튼 클릭 여부) 값에 반응하여 넣어보자.
watch: {
isSentCertificationNum: function (val) {
if (val) {
console.log(this.$refs.certificationNum)
// 위 값은 잘 잡히는데
console.log(this.$refs.certificationNum.style)
// 위 값에서는 style 안에 모든 속성값이 "" 빈값으로 들어옴..?
this.$refs.certificationNum.focus();
}
},
},
인증번호 작성칸이 v-show="isSentCertificationNum" 로 display 처리되는데 dom에 노출되는 과정에서 한 '틱'의 차이가 있는거 같은 느낌... 그래서 $nextTick을 써보았다.
watch: {
isSentCertificationNum: function (val) {
if (val) {
this.$nextTick(() => {
this.$refs.certificationNum.focus();
});
}
},
},
잘된다!