1

Estoy estancado con un proyecto desde hace mucho, mi botón de borrar funciona pero solo borra el último o el primero de la lista (si le hago alguna modificación de parámetro) no el que seleccione el usuario. Cualquier ayuda la agradecería bastante. Muchas gracias. Acá grabé un video para que se comprenda un poco más mi problema: https://youtu.be/WgH9a7ocUm4

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div class="home">
    <Nav />
    <FormLibro @alCerrar="modalAbierto = false" :abierto="modalAbierto" @guardar="guardarLibro" />
    <b-container class="mt-2">
      <Filtros @buscar="alBuscar" @crear="alCrear" />
      <b-table small striped :items="libros">
        <template #cell(acciones)="data" :v-for="(libros, index) in libros">
          <div class="d-flex justify-content-evenly">
            <b-button pill size="sm" @click="editarLibro(data)"  variant="outline-primary">
              <b-icon icon="pencil-fill"/>
            </b-button>
            <b-button pill size="sm" @click="eliminar(data)" variant="outline-danger">
              <b-icon icon="archive-fill" />
            </b-button>
          </div>
        </template>
      </b-table>
    </b-container>
  </div>
</template>

<script>
import Nav from '../components/Nav.vue'
import Filtros from '../components/Filtros.vue'
import FormLibro from '../components/FormLibro.vue'

export default {
  name: 'Home',
  components: {
    Nav,
    Filtros,
    FormLibro
  },
  data () {
    return {
      modalAbierto: false,
      libros: [{}]
  },
  methods: {

    eliminar (libro) {
      const eliminar = this.libros.findIndex(el => el.id === libro.id)
      this.libros.splice(eliminar, 1)
    },

}
</script>

1 respuesta 1

0

Hay dos "detalles" en tu código.

Primero: Dentro del ciclo estás usando data como parámetro de las funciones. Dependiendo de la estructura de datos, debería ser algo como: eliminar(libros[index].id)

    <template #cell(acciones)="data" :v-for="(libros, index) in libros">
      <div class="d-flex justify-content-evenly">
        <b-button pill size="sm" @click="editarLibro(data)"  variant="outline-primary">
          <b-icon icon="pencil-fill"/>
        </b-button>
        <b-button pill size="sm" @click="eliminar(data)" variant="outline-danger">
          <b-icon icon="archive-fill" />
        </b-button>
      </div>
    </template>

Segundo: No estás comprobando el resultado de findIndex() que devuelve -1 cuando no encuentra una coincidencia y en la siguiente línea siempre eliminas el último elemento, porque cuando splice() recibe un parámetro negativo buscará el elemento a borrar comenzando por el último.

En la plantilla cambia el dato que envías:

        <b-button pill size="sm" @click="eliminar(libros[index].id)" variant="outline-danger">

En Javascript, solo cambia el parámetro a recibir, que sea ID en vez de un objeto, y agrega unas validaciones en el método:

eliminar (id) {
  if(this.libros.length > 0) {
    // Solo si hay elementos
    const eliminar = this.libros.findIndex(el => el.id === id)
    if(eliminar >= 0) {
      // Borrar solo si hay coincidencia
      this.libros.splice(eliminar, 1)
    }
  }
},

En caso de que no funcione, como primera línea del método eliminar() agrega console.log(id) y edita la pregunta para agregar el resultado que aparece en la consola del navegador.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.