如何在Laravel中使用Vue JS删除数据

时间:2019-01-03 08:36:14

标签: laravel vue.js vuejs2 vue-component splice

我想在我的laravel应用中使用vue js创建删除功能。

这是我尝试的

我的.vue代码

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

我的变量

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

我的删除方法

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

我得到的错误

  

TypeError:_this4.artists.splice不是函数

上面的

代码可以从数据库中删除数据,但不能从数组结果中删除数据。

1 个答案:

答案 0 :(得分:1)

您正在将数据拼接到其母数组。

尝试一下。

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