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.

Answer 1

You are splicing data to its mother array.

Try this.

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