포커스 주는 방법 ref

Vue.js에서 요소에 포커스를 주는 방법은 ref 속성과 $refs를 사용하는 것입니다. 아래 예시를 통해 설명드리겠습니다.

1. 템플릿에서 요소에 ref 속성 추가:

   vue
   <template>
     <div>
       <input ref="inputElement" />
       <button @click="focusInput">Focus Input</button>
     </div>
   </template>
   

2. 메서드에서 $refs를 사용하여 포커스 주기:

   vue
   <script>
   export default {
     methods: {
       focusInput() {
         // $refs를 사용하여 ref로 지정한 요소에 접근하고 포커스를 줍니다
         this.$refs.inputElement.focus();
       }
     }
   };
   </script>
   

위의 예시에서 ref로 지정한 inputElement 요소에 $refs를 사용하여 접근하고 focus() 메서드를 호출하여 포커스를 줄 수 있습니다. 이렇게 하면 버튼을 클릭하면 입력 필드에 포커스가 주어집니다.

또한, 포커스를 준 요소에 대한 접근은 컴포넌트의 라이프사이클 훅이나 DOM 요소의 변경에 따라서도 필요할 수 있습니다.