Λήψη Κλειδιών κατά την Επανάληψη Πινάκων στο 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'],
  }
}