Kuvunja Arrays katika Vue

Vue inaruhusu kuunda vitaki kwa mzunguko. Hii inafanywa kwa kutumia derectiva maalum v-for. Hebu tuangalie, inavyofanya kazi kwa arrays. Ili kufanya hivyo, tutafanya array ifuatayo:

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

Wacha tuonyeshe kila kipengele cha array hii kwenye aya tofauti. Ili kufanya hivyo kwenye muonekano kwanza tufanye aya:

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

Sasa tuandikie aya yetu derectiva v-for. Thamani ya derectiva hii inapaswa kuonyeshwa jina la array inayovunjwa na kigeu, ambacho kwa mfuatano kitaingia vitu vya hii array. Kwa upande wetu jina la array litakuwa arr, na kwa kigeu tutaunda jina elem:

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

Matokeo yake, aya yetu itarudiwa mara kadiri ya idadi ya vipengele katika array yetu. Wacha tuonyeshe vipengele vinavyovunjwa kwenye maandishi ya ayah zetu:

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