Ottenere le chiavi durante l'iterazione di array in Vue

A volte, oltre agli elementi dell'array, vorremmo avere accesso anche alle chiavi. Per questo viene utilizzata la seguente sintassi estesa:

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

Con le chiavi durante l'output si possono fare varie operazioni. Ad esempio, facciamo in modo che i numeri inizino da uno:

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

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