Remover elementos de un array en Vue: CRUD

Como parte de nuestra aplicación de listado, que forma parte de nuestro CRUD, vamos a crear la opción de eliminar, que al no ser falta definir un componente para esta opción, ya que la hacemos directamente en el listado, podemos usar cualquier cosa que podamos aplicar un evento click, por ejemplo, un botón:

<template>
 <div>
   <h1>Listado</h1>
   <router-link :to="{ name: 'create' }">Crear</router-link>
   <ul>
     <li v-for="(a, k) in $root.animes" :key="a">
       <router-link
         :to="{ name: 'detail', params: { anime: JSON.stringify(a) } }"
       >
         {{ a.title }}
       </router-link>
       -
       <router-link :to="{ name: 'edit', params: { position: k } }"
         >Edit</router-link
       >
       <button @click="remove(k)">Eliminar</button>
     </li>
   </ul>
 </div>
</template>

Como puedes ver, tenemos una función de remove, al cual le pasamos el índice, pero puede ser tambien el id si estás trabajando con una base de datos o una rest api; finalmente lo eliminamos de nuestro listado:

<script>
export default {
 data() {
   return {
     animes: [],
   };
 },
 async mounted() {
   await this.$root.getAnime();
   console.log(this.$root.animes[1].title);
 },
 methods: {
   remove:function(i){
     this.$root.animes.splice(i,1)
   }
 },
};
</script>

Y con esto, cuando se elimina el elemento de un componente reactivo, como el array, automáticamente se actualiza de nuestro array.

23-11-2021 - Andrés Cruz

In english

• Categoría
• /
• Vue
• /
• Remover elementos de un array en Vue: CRUD