Delete item, reload list array.splice in Vue - 34

We are going to delete the array position corresponding to the record to be deleted at the time of deleting

The problem we currently have, once defined in the list:

XX

If we delete a record, in which, we simply call the Rest API:

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

Table listing does not reload:

<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>

This is because we are not reloading the array called movies.

Removing elements from arrays in JavaScript

To remove elements from arrays in JavaScript, there are 1000 ways to do it here we also have an important point and not all the operations that we do on the array are detected by View so there you can explore a little on the internet:

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

So, in addition to calling the Rest API, we must remove the element from the array, to do this:

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)
},

This is a way to delete an element by its index, which is exactly what we want, that's what we're doing. You'll see that, for example, if I want to delete the 26, I'll delete it perfectly. So here you can see that good. And obviously, if I recharge, it won't be deleted, it's not deleted, it's simply deleted here in the client. So here you can see that they are independent operations.

08-03-2025 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Delete item, reload list array.splice in Vue - 34