Vue တွင် အရာဝတ္ထုများ array မှ ဖျက်ရန် ခလုတ်

ယခု array ထဲမှ အချက်အလက်များကို ဖျက်ရန် ခလုတ်တစ်ခု အကောင်အထည်ဖော်ကြပါစို့။ အကောင်အထည်ဖော်ခြင်းကို စတင်လိုက်ကြပါစို့။ အောက်ပါ array ရှိသည်ဆိုပါစို့။

javascriptdata() {
  return {
    users: [
      {
        id: 1,
        name: 'name1',
        surn: 'surn1',
      },
      {
        id: 2,
        name: 'name2',
        surn: 'surn2',
      },
      {
        id: 3,
        name: 'name3',
        surn: 'surn3',
      },
    ]
  }
}

Array ၏ အကြောင်းအရာများကို စာရင်းတစ်ခုအနေဖြင့် ပြသပါမည်။

App.vue<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
      {{ user.surn }}
    </li>
  </ul>
</template>

စာရင်းရှိ အမှတ်တစ်ခုစီတွင် ဖျက်ရန် ခလုတ်တစ်ခု ပြုလုပ်ပါမည်။ ဤခလုတ်တွင် ကျွန်ုပ်တို့ ဖျက်ရန် ရည်ရွယ်ထားသော array element ၏ id ကို parameter အဖြစ် လွှဲပေးမည့် method တစ်ခုသို့ ချိတ်ဆက်ပါမည်။

App.vue<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
      {{ user.surn }}
      <button @click="removeItem(user.id)">remove</button>
    </li>
  </ul>
</template>

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

javascriptmethods: {
  removeItem: function(id) {
    this.users = this.users.filter((user) => {
      return user.id !== id;
    })
  }
}

App.vuedata() {
  return {
    users: [
      {
        id: 1,
        name: 'name1',
        salary: 100,
        age: 30,
      },
      {
        id: 2,
        name: 'name2',
        salary: 200,
        age: 40,
      },
      {
        id: 3,
        name: 'name3',
        salary: 300,
        age: 50,
      },
    ],
  }
}