$nextTick

박경준·2022년 1월 26일
0

신용점수

목록 보기
5/7

내가 의도한 것은...
인증번호 발송 버튼 클릭 후 하단 인증번호 입력 창에 focus() 넣기였다..

try 1

단순하게 인증번호 발송 함수 마지막에 넣어보자.

sendAuth() {
  ...
  this.$refs.certificationNum.focus();
  // 이렇게 마지막에 node.focus()를 했더니 동작 안함
}

try 2

watch로 isSentCertificationNum(인증번호 발송 버튼 클릭 여부) 값에 반응하여 넣어보자.

watch: {
  isSentCertificationNum: function (val) {
    if (val) {
      console.log(this.$refs.certificationNum)
      // 위 값은 잘 잡히는데
      console.log(this.$refs.certificationNum.style)
      // 위 값에서는 style 안에 모든 속성값이 "" 빈값으로 들어옴..?
      this.$refs.certificationNum.focus();
    }
  },
},

try 3

인증번호 작성칸이 v-show="isSentCertificationNum" 로 display 처리되는데 dom에 노출되는 과정에서 한 '틱'의 차이가 있는거 같은 느낌... 그래서 $nextTick을 써보았다.

watch: {
  isSentCertificationNum: function (val) {
    if (val) {
      this.$nextTick(() => {
        this.$refs.certificationNum.focus();
      });
    }
  },
},

잘된다!

profile
빠굥

0개의 댓글