Vuejs splice multiple item from list

Question

I have multiple delete option in my app and it does delete items from database but the issue is in front-end. Somehow I can't splice right items from list

Demo

As you can see I deleted items 2 and 3 but item 1 removed from list.

Code

commented

toggleSelection(row) {
    const myIds = this.multipleSelection.map((row) => row.id);
    this.$confirm('This will permanently delete the items. Continue?', 'Warning', {
        confirmButtonText: 'Yes',
        cancelButtonText: 'Cancel',
        type: 'warning',
        center: true
    }).then(() => {
        axios.post('/api/wishlist/destroyMultiple/', {ids: myIds}).then((res) => {
            this.$message({
                showClose: true,
                type: 'success',
                message: res.data.success
            });
            this.wishlist.splice(this.wishlist.indexOf(row), 1)  // issue comes from here
        })
        .catch((err) => {
            this.$message({
                showClose: true,
                type: 'info',
                message: err
            });
        });
    }).catch(() => {
        this.$message({
            showClose: true,
            type: 'info',
            message: 'Delete canceled'
        });
    });
},

Any idea?

What is the input value (row) of the toggleSelection function? a single row? or all selected rows? or what? — Muhammad Vakili
– Muhammad Vakili, Commented Jul 4, 2020 at 3:36

Muhammad Vakili · Accepted Answer · 2020-07-04 03:54:25Z

1

So, It seems that you're trying to access the index of undefined and splice it right here:

this.wishlist.splice(this.wishlist.indexOf(row), 1)

The code above will remove the last element of the array. Let's try this one:

this.multipleSelection.forEach(x => this.wishlist.splice(this.wishlist.indexOf(x),1))

edited Jul 4, 2020 at 3:54

answered Jul 4, 2020 at 3:51

Muhammad Vakili

7085 silver badges19 bronze badges

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

1 Comment

mafortis Over a year ago

ReferenceError: a is not defined

Collectives™ on Stack Overflow

Vuejs splice multiple item from list

Demo

Code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Demo

Code

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related