Taulukoiden iterointi Vue:ssa

Vue sallii tagien muodostamisen silmukassa. Tämä tehdään erityisellä v-for-direktiivillä. Katsotaan, kuinka se toimii taulukoille. Tehdään tätä varten seuraava taulukko:

javascriptdata() {
  return {
    arr: ['a', 'b', 'c'],
  }
}

Esitetään jokainen tämän taulukon elementti omassa kappaleessaan. Tätä varten tehdään näkymään aluksi kappale:

App.vue<template>
  <p></p>
</template>

Kirjoitetaan nyt kappaleellemme v-for-direktiivin. Tämän direktiivin arvoksi tulee määrittää iteroitavan taulukon nimi ja muttuja, johon peräkkäin tulevat tämän taulukon alkiot. Meidän tapauksessamme taulukon nimi on arr, ja muuttujalle keksimme nimen elem:

App.vue<template>
  <p v-for="elem in arr"></p>
</template>

Tuloksena kappaleemme toistuu niin monta kertaa kuin taulukossamme on alkioita. Esitetään iteroidut alkiot kappaleidemme tekstissä:

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

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}