Vue-ში მასივების გადაყოლა

Vue საშუალებას აძლევს ტეგების ფორმირებას ციკლში. ეს კეთდება სპეციალური დირექტივის v-for საშუალებით. ვნახოთ, როგორ მუშაობს ის მასივებისთვის. ამისთვის შევქმნათ შემდეგი მასივი:

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

გამოვიტანოთ ამ მასივის თითოეული ელემენტი ცალკე აბზაცში. ამისთვის წარმოდგენაში თავიდან შევქმნათ აბზაცი:

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

ახლა დავუწეროთ ჩვენს აბზაცს დირექტივა v-for. ამ დირექტივის მნიშვნელობად უნდა მივუთითოთ გადასაყოლებელი მასივის სახელი და ცვლადი, რომელშიც თანმიმდევრულად შევა ამ მასივის ელემენტები. ჩვენს შემთხვევაში მასივის სახელი იქნება arr, ხოლო ცვლადისთვის ჩვენ შევიგონებთ სახელს elem:

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

შედეგად ჩვენი აბზაცი განმეორდება იმდენჯერ, რამდენი ელემენტიც არის ჩვენს მასივში. გამოვიტანოთ გადაყოლილი ელემენტები ტექსტში ჩვენი აბზაცების:

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