Iteriranje nizova u Vue

Vue omogućava formiranje tagova u petlji. To se radi uz pomoć posebne directive v-for. Pogledajmo kako ona radi za nizove. Za ovo napravimo sledeći niz:

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

Ispišimo svaki element ovog niza u zasebnom pasusu. Za ovo u predstavljanju (template) za početak napravimo pasus:

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

Sada napišimo našem pasusu directivu v-for. Vrednošću ove directive treba naznačiti ime niza koji se iterira i varijablu u koju će redom upadati elementi ovog niza. U našem slučaju ime niza će biti arr, a za varijablu ćemo smisliti ime elem:

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

Kao rezultat, naš pasus će se ponoviti onoliko puta koliko ima elemenata u našem nizu. Hajde da ispisujemo iterirane elemente u tekstu naših pasusa:

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