[vue3] 동적인 ref 쓰기

가끔 v-for를 돌리면서 필요한 부분을 차례대로 ref에 넣어줘야할 때가 있음(일일히 ref="input1"이렇게 설정하는게 아니고). 이걸 dynamic ref라고 하는데 아래와 같이 넣을 수 있음.

 

1. ref에 함수 사용

<template>
  <div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
    {{ item }}
  </div>
</template>

// script 쓰는 부분
const divs = ref([]);

// 이부분을 활용하여 업데이트될때 꼭 리셋해줘야한다고 함
onBeforeUpdate(() => {
  divs.value = [];
});

이러면 divs에 순서대로 착착착 들어감.

 

참고로 약간 뭐 이런식으로 좀 nested하게 넣고싶다면

[
  [el, el],
  [el, el],
]

따로 함수를 빼서 이렇게 적용해도 된다.

<template>
  <div v-for="(item, i) in list" :ref="el => { setRef(i, el) }">
    {{ item }}
  </div>
</template>

const divs = ref([]);

onBeforeUpdate(() => {
  divs.value = [];
});

// 여기
const setRef = (i, el) => {
  if (!divs.value[i]) {
    divs.value[i] = [];
  }
  
  divs.value[i].push(el);
}

 

https://markus.oberlehner.net/blog/refs-and-the-vue-3-composition-api/

$refs and the Vue 3 Composition API