Reaktivno uklanjanje komponenti u Vue

Naučimo kako da reaktivno uklanjamo podređene komponente sa liste. Napravićemo u svakoj podređenoj komponenti posebno dugme. Klikom na ovo dugme biće emitovan događaj i u roditeljskoj komponenti će biti uklonjena određena podređena komponenta po njenom id.

Prionimo na realizaciju. Neka u roditeljskoj komponenti bude sledeći niz objekata:

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

Napišimo u roditeljskoj komponenti metod za uklanjanje korisnika po njegovom id:

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

Kreirajmo komponente u petlji, prosledivši im kao parametar ime, prezime, id i metod za uklanjanje:

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

Definišimo ulazne podatke u opciji props i emitovani događaj u opciji emits:

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

Prikažimo u prikazu komponente ime i prezime korisnika:

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

A sada napravimo dugme, čijim klikom će biti emitovan događaj za uklanjanje. Parametrom ovog događaja će biti prosleđivan id komponente. Roditeljska komponenta pri primanju događaja će ukloniti datog korisnika iz niza objekata i on će reaktivno nestati sa liste korisnika.

Dakle, realizujmo ovo dugme:

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