Eliminación reactiva de componentes en Vue

Aprendamos a eliminar reactivamente componentes hijos de una lista. Para hacer esto, creemos un botón especial en cada componente hijo. Al hacer clic en este botón se emitirá un evento y en el componente padre se eliminará el componente hijo especificado por su id.

Procedamos con la implementación. Supongamos que en el componente padre existe el siguiente array de objetos:

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

Escribamos en el componente padre un método para eliminar un usuario por su id:

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

Creemos componentes en un ciclo, pasándoles como parámetros el nombre, apellido, id y el método para eliminar:

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

Definamos los datos entrantes en la opción props y el evento emitido en la opción emits:

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

Mostremos en la plantilla del componente el nombre y apellido del usuario:

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

Y ahora hagamos un botón, al hacer clic en el cual se emitirá un evento para eliminar. Como parámetro de este evento se pasará el id del componente. El componente padre al recibir el evento eliminará este usuario del array de objetos y este desaparecerá reactivamente de la lista de usuarios.

Entonces, implementemos este botón:

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