Att få nycklar vid iteration av arrayer i Vue

Ibland, förutom arrayelementen, skulle vi också vilja ha åtkomst till nycklarna. För detta används följande utökade syntax:

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

Med nycklarna vid utskrift kan man göra olika operationer. Till exempel, låt oss se till att numren börjar på ett:

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

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