[vue.js] VUE3.0 input에 focus가 안된다면? (feat.nextTick)

선요약 :

1. Template부분 :  focus 주고싶은 input 태그에 ref 선언

    <div>
        <input type="text" v-model="textVal" ref="refInput"/>
    </div>

2.setup 부분 : focus 함수 선언

setup() {
    // INPUT REF
    const refInput = ref()

    // FOCUS 호출
    const focusOn = () => {
        // 화면에 추가된 후 동작하도록 nextTick
        nextTick(()=> {
            refInput.value.focus()
        })
    }
    onActivated(()=>{
        focusOn()
    })

    return {
      focusOn,
      refInput,
    }
}

 

설명 :

1. 모든 방법을 사용해도 VUE3로 구성한 내 vue페이지가 구글에있는 모든 VUE focus 방법이 안먹는다.

2. 여기서 중요한 해결방법은 nextTick() 함수다. (각자 알아보기)