Tömbök bejárása Vue-ban

A Vue lehetővé teszi címkék létrehozását ciklusban. Ezt a speciális v-for direktívával tehetjük meg. Nézzük meg, hogyan működik tömbök esetén. Ehhez készítsük el a következő tömböt:

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

Jelenítsük meg a tömb minden elemét külön bekezdésben. Ehhez a nézetben először készítsünk egy bekezdést:

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

Most írjuk a bekezdésünkhez a v-for direktívát. Ennek az értékeként az bejárni kívánt tömb nevét és egy változót kell megadnunk, amelybe egymás után bekerülnek a tömb elemei. Esetünkben a tömb neve arr, a változó neve pedig legyen elem:

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

Ennek eredményeképpen a bekezdésünk annyiszor ismétlődik meg, ahány elem van a tömbben. Most jelenítsük meg a bejárt elemeket a bekezdések szövegében:

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],
  }
}