Sleutels verkrijgen bij het doorlopen van arrays in Vue

Soms willen we, naast de elementen van de array, ook toegang tot de sleutels. Hiervoor wordt de volgende uitgebreide syntaxis gebruikt:

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

Er kunnen verschillende bewerkingen worden uitgevoerd met de sleutels bij het weergeven. Laten we er bijvoorbeeld voor zorgen dat de nummering begint bij één:

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

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