how to delete data using vue js in laravel

Question

i want to create a delete function with vue js in my laravel app.

here what i try

my .vue code

<tr v-for="(artist, index) in artists.data">
    <td>{{ artist.artist_name }}</td>
    <td>{{ artist.gender }}</td>
    <td>{{ artist.created_at }}</td>
    <td>{{ artist.updated_at }}</td>
    <td>Edit | <a href="javascript:;" v-on:click="deleteUser(artist.id, index)">Delete</a></td>

my variable

data() {
    return {
        term:'',
        disabled: 0,
        artists: [],
        results: [],
        loading: false,
        noResults: false,
        SearchDiv: false,
        IndexDiv: true
    }
},

my delete method

deleteUser(id, index) {
    axios.delete('/api/artist/'+id)
    .then(resp => {
        this.artists.splice(index, 1);
    })
    .catch(error => {
        console.log(error);
    })
}

error i get

TypeError: _this4.artists.splice is not a function

code above can delete data from database but not remove data from array result.

I think being on Vue is easier you reload the artists array. — Mr.Web
– Mr.Web, Commented Jan 3, 2019 at 8:42

MONSTEEEER · Accepted Answer · 2019-01-03 09:21:42Z

2

You are splicing data to its mother array.

Try this.

this.artists.data.splice(index, 1);

answered Jan 3, 2019 at 9:21

MONSTEEEER

5707 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to delete data using vue js in laravel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related