[Vue.js] $ref 가져올 때 변수를 통해서 접근하기

💗vue $ref란?

vue코드에서 DOM요소에 접근하기 위해서 사용하는 속성 

 

HTML 예시 코드

<div ref="target"/>

Vue 접근 예시 코드

this.$refs.target;

script 코드 측에서 html에 지정한 ref를 접근하는 방법은 위와 같다.

 

 

---

📒$refs접근 시 변수로 접근하기

refs의 경우  ID처럼 고유한 하나의 유닛을 접근해야 될 때가 있다.

만약 for문으로 10개의 refs를 생성한다면 이때는 변수를 이용해줘야 한다.

<div v-for="i in 10" :key="i" :ref="`target-${i}`">
 {{i}}
</div>

위 코드로 10개의 div를 생성해주면,

각각 다른 ref속성을 갖는 DOM이 생성된다.

 

vue 접근 예시 코드

selectRefs(i) {
    let targetRef = `target-${i}`;
    vm.$refs[targetRef][0];
}

그냥 텍스트로 접근할 때와 다른 점은 변수로 $refs를 호출해주면 배열 안으로 데이터가 들어온다.

선택된 $refs를 접근하려면 첫 번째를 가져온다는 [0]을 뒤에 붙여주면

변수 형태로 DOM에 접근이 가능하다.