Schlüssel beim Durchlaufen von Arrays in Vue abrufen

Manchmal möchten wir neben den Elementen des Arrays auch Zugriff auf die Schlüssel haben. Dafür wird die folgende erweiterte Syntax verwendet:

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

Mit den Schlüsseln können bei der Ausgabe verschiedene Operationen durchgeführt werden. Lassen Sie uns beispielsweise bewirken, dass die Nummerierung bei eins beginnt:

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

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