[Vue.js] ref의 input 포커스 이벤트 주기

 

<strong> 영역을 눌렀을 때 <input>이 display: block되면서(=input은 none) 문구를 수정하고, <input>에서 blur 됐을 때 다시 <strong> 태그가 block되는 기능을 구현했다. (타이틀 수정 기능,,)

 

문제는 input이 활성화되면서 focus()가 되어야했는데 아래와 같이 작성 후 클릭이벤트를 주었을 때 아무런 동작도 하지 않았다.

<strong v-if="!isTryModify" class="title" @click="tryEdit">
  {{ title }}
</strong>
<input
  v-if="isTryModify"
  ref="titleRef"
  v-model="title"
/>

const tryEdit = () => {
  isTryModify.value = true
  if (titleRef.value) titleRef.value.focus()
}

 

스크립트 부분에 setTimeout을 0으로 걸어주니 해결되었다.

왜인지는 더 공부해봐야하는 부분....

const tryEdit = () => {
  isTryModify.value = true
  setTimeout(() => {
    if (titleRef.value) titleRef.value.focus()
  }, 0)
}

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.