Получаване на ключове при обхождане на масиви във Vue

Понякога, освен елементите на масива, бихме искали да имаме достъп и до ключовете. За това се използва следният разширен синтаксис:

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

С ключовете при извеждане могат да се правят различни операции. Например, нека направим така, че номерата да започват от едно:

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

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