Reaktiivne komponentide eemaldamine Vue's

Õpime reaktiivselt eemaldama laps komponente loendist. Selleks teeme igas laps komponendis spetsiaalse nupu. Sellele nupule vajutades emiteeritakse sündmus ja vanem komponendis eemaldatakse määratud laps komponent selle id järgi.

Asume rakendamise juurde. Olgu vanem komponendis antud järgmine objektide massiiv:

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

Kirjutame vanem komponendis meetodi kasutaja eemaldamiseks tema id järgi:

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

Loome komponendid tsüklis, edastades neile parameetritena nime, perekonnanime, id ja eemaldamise meetodi:

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

Kirjutame sissetulevad andmed seadistuses props ja emiteeritava sündmuse seadistuses emits:

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

Kuvame komponendi esitluses kasutaja ees- ja perekonnanime:

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

Nüüd teeme nupu, millele vajutamisel emiteeritakse sündmus eemaldamiseks. Selle sündmuse parameetrina edastatakse komponendi id. Vanem komponent sündmuse saamisel eemaldab selle kasutaja objektide massiivist ja ta reaktiivselt kaob kasutajate loendist.

Niisiis, rakendame selle nupu:

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