Vue에서 배열 순회 시 키 얻기

때때로 배열 요소뿐만 아니라 키에도 접근하고 싶을 수 있습니다. 이를 위해 다음 확장 구문이 사용됩니다:

App.vue<template>
  <p v-for="(elem, key) in arr">
     {{ key }} {{ elem }}
  </p>
</template>

출력 시 키로 다양한 작업을 할 수 있습니다. 예를 들어, 번호가 1부터 시작하도록 만들어 봅시다:

App.vue<template>
  <p v-for="(elem, key) in arr">
     {{ key + 1 }} {{ elem }}
  </p>
</template>

javascriptdata() {
  return {
    arr: ['x', 'y', 'z'],
  }
}