Eliminar item, recargar listado array.splice en Vue - 34

Vamos a eliminar la posición del array correspondiente al registro a eliminar al momento de eliminar

El problema que tenemos actualmente, una vez definido en listado:

XX

 

Si eliminamos un registro, en la cual, llamamos simplemente a la Rest API:

remove(movie){
   axios.delete('http://code4movies.test/api/pelicula/' + movie.row.id)
       .then(res => res.data)
       .catch(error => error)
},

No se recarga el listado de la tabla:

<o-table :data="movies" :bordered="true" :striped="true" :hoverable="true" :selectable="true">
    <o-table-column field="id" label="ID" v-slot="m" sortable>
        {{ m.row.id }}
    </o-table-column>
    <o-table-column field="titulo" label="Title" v-slot="m" sortable>
        {{ m.row.titulo }}
    </o-table-column>
    <o-table-column label="Actions" v-slot="m">
        <o-button @click="$router.push({ name: 'movie.save', params: { id: m.row.id } })"
            icon-left="pencil">Edit</o-button>
        <div class="inline ms-3">
            <o-button variant="danger" size="small" @click="confirmDeleteActive = true; deleteMovieRow = m"
                icon-left="delete">Delete</o-button>
        </div>
    </o-table-column>
</o-table>

Esto se debe a que no estamos recargando el array llamado movies.

Eliminar elementos de arrays en JavaScript

Para eliminar elementos de los arrays en JavaScript, existen 1000 formas de hacerlos aquí también tenemos un punto importante y no todas las operaciones que hagamos sobre la array son detectadas por View por lo tanto ahí puede explorar un poquito en internet:

• pop()
• shift()
• splice
• Asignaciones directas
• push()

Así que, ademas de llamar a la Rest API, debemos de eliminar el elemento del array, para ello:

remove(movie){
    axios.delete('http://code4movies.test/api/pelicula/' + movie.row.id)
        .then(res => res.data)
        .catch(error => error)
    this.movies.splice(movie.index,1)
},

Esta es una forma que permite eliminar un elemento mediante su índice que es justamente lo que nosotros queremos eso es lo que estamos haciendo vas a ver que por ejemplo si quiero eliminar el 26 ya lo elimino perfecto Así que aquí puedes ver que bueno Y obviamente si recargo no se va a eliminar no se eliminado simplemente se eliminó aquí en el cliente entonces aquí puedes ver que son operaciones independientes

08-03-2025 - Andrés Cruz

In english

• Categoría
• /
• Vue
• /
• Eliminar item, recargar listado array.splice en Vue - 34