Vue-da Komponentlerin Reaktiv Silinmesi

Gelin siyahidan usaq komponentleri reaktiv silmeyi oyrenek. Bunun ucun her bir usaq komponentde xususi bir duyme edek. Bu duymeye basdiqda hadise iste salınacaq ve ana komponentde muəyyən edilmis usaq komponent onun id-ine gore silinecek.

Reallasdirmaga baslayaq. Tutaq ki, ana komponentde asagidaki obyektler massivi var:

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

Ana komponentde istifadecini onun id-ine gore silmek ucun metod yazaq:

App.vuemethods: {
  remove(id) {
    this.users = this.users.filter((user) => {
      return user.id !== id;
    })
  }
}

Komponentleri dovr icinde yaradaq, onlara parametr olaraq ad, soyad, id ve silmek ucun metodu oturek:

App.vue<template>
  <User
    v-for   ="user in users"
    
    :id     ="user.id"
    :name   ="user.name"
    :surn   ="user.surn"
    @remove ="remove"
    :key    ="user.id"
  />
</template>

Gelen datalari props konfiqurasiyasinda ve iste salinan hadiseni emits konfiqurasiyasinda qeyd edek:

components/User.vueprops: {
  id:     Number,
  name:   String,
  surn:   String,
},
emits: ['remove'],

Komponentin templatinde istifadecinin adini ve soyadini cixartaq:

components/User.vue<template>
  {{ name }}
  {{ surn }}
</template>

Indi ise basdiqda silinme hadisesini iste salan bir duyme edek. Bu hadisenin parametri kimi komponentin id-i oturulecek. Ana komponent hadiseni alanda bu istifadecini obyektler massivinden silecek ve o istifadeciler siyahisindan reaktiv shekilde yox olacaq.

Beləliklə, bu duymeni reallaşdıraq:

components/User.vue<template>
  {{ name }}
  {{ surn }}
  
  <button @click="$emit('remove', id)">
    remove
  </button>
</template>