Prechádzanie polí vo Vue

Vue umožňuje vytvárať značky v cykle. To sa robí pomocou špeciálnej direktívy v-for. Pozrime sa, ako funguje pre polia. Na to si vytvorme nasledujúce pole:

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

Vypíšme každý prvok tohto poľa v samostatnom odseku. Na to v šablóne na začiatok vytvorme odsek:

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

Teraz napíšme nášmu odseku direktívu v-for. Hodnotou tejto direktívy treba uviesť názov prechádzaného poľa a premennú, do ktorej postupne budú prichádzať prvky tohto poľa. V našom prípade bude názov poľa arr, a pre premennú vymyslíme názov elem:

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

Výsledkom bude, že náš odsek sa zopakuje tolkokrát, koľko prvkov je v našom poli. Vypisujme prechádzané prvky v texte našich odsekov:

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