Iteriranje skozi polja v Vue

Vue omogoča oblikovanje oznak v zanki. To naredimo s posebno direktivo v-for. Poglejmo, kako deluje za polja. Za to pripravimo naslednje polje:

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

Izpišimo vsak element tega polja v svojem odstavku. Za to v predstavitvi za začetek naredimo odstavek:

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

Zdaj našemu odstavku dodajmo direktivo v-for. Kot vrednost te direktive navedemo ime prebiranega polja in spremenljivko, v katero bodo zaporedoma prihajali elementi tega polja. V našem primeru bo ime polja arr, za spremenljivko pa si izmislimo ime elem:

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

Kot rezultat se bo naš odstavek ponovil tolikokrat, kolikor je elementov v našem polju. Izpišimo prebrane elemente v besedilu naših odstavkov:

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