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>