Vue တွင် Array Element များကိုဖျက်ရန် Button ပြုလုပ်ခြင်း

List မှ Element များကိုတုံ့ပြန်သိမ်းမိုးမှုဖြင့်ဖျက်ရန် Button တစ်ခုပြုလုပ်ကြပါစို့။ အကောင်အထည်ဖော်ခြင်းကိုစတင်လိုက်ပါမည်။ ကျွန်ုပ်တို့တွင် Array တစ်ခုရှိသည်ဆိုပါစို့။

App.vuedata() {
  return {
    items: ['a', 'b', 'c', 'd', 'e'],
  }
}

Array အတွင်းပါအကြောင်းအရာများကို List အဖြစ်ထုတ်ပြပါမည်။

App.vue<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

List ထဲရှိ Item တစ်ခုစီတိုင်းတွင် ဖျက်ရန် Button တစ်ခုစီပြုလုပ်ပါမည်။ ဤ Button ထဲတွင် ကျွန်ုပ်တို့ဖျက်ရန်ရည်ရွယ်ထားသော Array Element ၏နံပါတ်ကို parameter အဖြစ်လက်ခံမည့် Method တစ်ခုနှင့်ချိတ်ဆက်ပါမည်။

App.vue<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
      <button @click="removeItem(index)">remove</button>
    </li>
  </ul>
</template>

removeItem Method ထဲတွင် ဖျက်ခြင်းကိုအကောင်အထည်ဖော်ပါမည်။

App.vuemethods: {
  removeItem: function(index) {
    this.items.splice(index, 1);
  }
}