how to delete data using vue js in laravel

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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.

edited Jan 3 at 8:52

Farooq Khan

1,67011531

asked Jan 3 at 8:36

Jazuly

33213

I think being on Vue is easier you reload the artists array.

– Mr.Web
Jan 3 at 8:42

how to do it..?

– Jazuly
Jan 3 at 8:43

add a comment |

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.

edited Jan 3 at 8:52

Farooq Khan

1,67011531

asked Jan 3 at 8:36

Jazuly

33213

I think being on Vue is easier you reload the artists array.

– Mr.Web
Jan 3 at 8:42

how to do it..?

– Jazuly
Jan 3 at 8:43

add a comment |

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.

edited Jan 3 at 8:52

Farooq Khan

1,67011531

asked Jan 3 at 8:36

Jazuly

33213

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.

laravel vue.js vuejs2 vue-component splice

edited Jan 3 at 8:52

Farooq Khan

1,67011531

asked Jan 3 at 8:36

Jazuly

33213

edited Jan 3 at 8:52

Farooq Khan

1,67011531

asked Jan 3 at 8:36

Jazuly

33213

edited Jan 3 at 8:52

Farooq Khan

1,67011531

edited Jan 3 at 8:52

Farooq Khan

1,67011531

edited Jan 3 at 8:52

Farooq Khan

1,67011531

asked Jan 3 at 8:36

Jazuly

33213

asked Jan 3 at 8:36

Jazuly

33213

asked Jan 3 at 8:36

Jazuly

33213

I think being on Vue is easier you reload the artists array.

– Mr.Web
Jan 3 at 8:42

how to do it..?

– Jazuly
Jan 3 at 8:43

add a comment |

I think being on Vue is easier you reload the artists array.

– Mr.Web
Jan 3 at 8:42

how to do it..?

– Jazuly
Jan 3 at 8:43

I think being on Vue is easier you reload the artists array.

– Mr.Web
Jan 3 at 8:42

how to do it..?

– Jazuly
Jan 3 at 8:43

add a comment |

1 Answer
1

active

oldest

votes

You are splicing data to its mother array.

Try this.

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

answered Jan 3 at 9:21

MONSTEEEER

474214

finally, thanks bro...

– Jazuly
Jan 3 at 9:24

Alright! Keep coding.

– MONSTEEEER
Jan 3 at 9:25

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018793%2fhow-to-delete-data-using-vue-js-in-laravel%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You are splicing data to its mother array.

Try this.

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

answered Jan 3 at 9:21

MONSTEEEER

474214

finally, thanks bro...

– Jazuly
Jan 3 at 9:24

Alright! Keep coding.

– MONSTEEEER
Jan 3 at 9:25

add a comment |

You are splicing data to its mother array.

Try this.

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

answered Jan 3 at 9:21

MONSTEEEER

474214

finally, thanks bro...

– Jazuly
Jan 3 at 9:24

Alright! Keep coding.

– MONSTEEEER
Jan 3 at 9:25

add a comment |

You are splicing data to its mother array.

Try this.

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

answered Jan 3 at 9:21

MONSTEEEER

474214

You are splicing data to its mother array.

Try this.

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

answered Jan 3 at 9:21

MONSTEEEER

474214

answered Jan 3 at 9:21

MONSTEEEER

474214

answered Jan 3 at 9:21

MONSTEEEER

474214

answered Jan 3 at 9:21

MONSTEEEER

474214

finally, thanks bro...

– Jazuly
Jan 3 at 9:24

Alright! Keep coding.

– MONSTEEEER
Jan 3 at 9:25

add a comment |

finally, thanks bro...

– Jazuly
Jan 3 at 9:24

Alright! Keep coding.

– MONSTEEEER
Jan 3 at 9:25

finally, thanks bro...

– Jazuly
Jan 3 at 9:24

Alright! Keep coding.

– MONSTEEEER
Jan 3 at 9:25

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu