vuejs v-for에서 ref사용하기

VUE.JS 2.X > 컴포넌트 톺아보기 > 예외적인 상황들 > 엘리먼트 & 컴포넌트 접근 > 자식 컴포넌트의 인스턴스 및 요소에 접근하기

ref 를 v-for 와 함께 사용하는 경우에는 ref는 데이터 소스를 미러링하는 자식 컴포넌트를 포함하는 배열을 얻게 됩니다.

이 말의 뜻은 이러하다!

<template>
  <ul>
    <li v-for="(item, index) in items" ref="items" :key="item" @click="clickItem(index)">
      {{item}}
    </li>
  </ul>
</template>
<script>
export default ({
  data: () => ({
    items: [1, 2, 3, 4, 5]
  }),
  methods: {
    clickItem(idx) {
      this.$refs.items[idx].focus() = "clicked!"
    }
  }
})
</script>