CODEWITHSUNDEEP
typescriptvue.jsvuejs2
mafortis
mafortis

Reputation: 7138

Vuejs splice multiple item from list

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

one

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?

Upvotes: 0

Views: 871

Answers (1)

Muhammad Vakili
Muhammad Vakili

Reputation: 708

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

Upvotes: 1

Related Questions