Delete row from table using Vue

Question

I am completely new to Vue and can't seem to figure this situation out.

I need to delete a row from my table on click of a button.

Below is my code from each individual file used to render my page.

Main cart Vue page

<template>
    <div class="col-lg-12">
        <div class="card">
            <h6 class="card-header">Cart</h6>
            <div class="card-body">
                <div v-if="cartItems.length" class="row">
                    <div class="col-12">
                        <table class="table table-hover table-nowrap table-striped w-100 mb-0">
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th style="width: 9%">Quantity</th>
                                    <th class="text-right" style="width: 12%">Unit price (£)<br>(ex. VAT)</th>
                                    <th class="text-right" style="width: 15%">Quantity price (£)<br>(ex. VAT)</th>
                                    <th class="text-right" style="width: 10%">VAT ({{ vat }}%)</th>
                                    <th class="text-right" style="width: 9%">Total (£)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <app-order-detail v-for="(item, index) in cartItems" :key="index" :item="item" :row="row"></app-order-detail>
                                <tr style="background-color: inherit">
                                    <td colspan="4" style="border-top: none"></td>
                                    <td class="text-right thickTopBorder">
                                        <b>Total</b>
                                        <span class="text-danger">*</span>
                                    </td>
                                    <td class="text-right thickTopBorder">
                                        <b>{{ totalPlusVat.toFixed(2) }}</b>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="small text-muted text-right">
                            <span class="text-danger">*</span>
                            Total amount does not include delivery change + VAT
                        </div>
                    </div>
                </div>
                <div v-else>There are currently no items in your cart.</div>
            </div>
            <div class="card-footer">
                <div v-if="cartItems.length">
                    <router-link to="/order" tag="button" class="btn btn-info col-lg-3">Back</router-link>
                    <router-link to="/cart" tag="button" class="btn btn-primary col-lg-3">View</router-link>
                </div>
                <div v-else>
                    <router-link to="/order" tag="button" class="btn btn-primary">Place</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import * as params from '../params.js'
    import OrderDetail from "./OrderDetail";

    export default {
        name: 'CartPanel',

        components: {
            AppOrderDetail: OrderDetail
        },

        computed: {
            ...mapGetters({
                cartItems: 'cartItems',
                cartSubTotal: 'cartSubTotal',
                receivingAccount: 'receivingAccount'
            }),

            vat() {
                return params.VAT * 100;
            },

            totalPlusVat() {
                return ((this.cartSubTotal) * params.VAT_MULTIPLIER);
            }
        }
    }
</script>

Which when doing a console log I get an array with 3 objects in

Then in my other component which loops and renders each row in the table

Order detail Vue page

<template>
    <tr>
        <td class="align-middle">
            {{ item.servicename }}
        </td>
        <td>
            <div v-if="currentPage.includes('cart')" class="input-group">
                <input class="form-control" type="number" v-model="item.quantity" @input="updateQuantity" />
            </div>
            <div v-else>
                {{ item.quantity }}
            </div>
        </td>
        <td class="text-right align-middle">
            {{ unitprice }}
        </td>
        <td class="text-right align-middle">
            {{ quantityprice }}
        </td>
        <td class="text-right align-middle">
            {{ vat }}
        </td>
        <td class="text-right align-middle">
            {{ total }}
        </td>
        <td>
            <button class="btn btn-danger" type="button" @click.prevent="deleteEvent($event)">D</button>
        </td>
    </tr>
</template>

<script>
    import * as params from '../params.js';

    export default {
        name: 'OrderDetail',

        props: ['item'],

        computed: {
            vat() {
                const vat = this.item.quantityprice * params.VAT;

                return vat.toFixed(2);
            },

            total() {
                const total = this.item.quantityprice * params.VAT_MULTIPLIER;

                return total.toFixed(2);
            },

            unitprice() {
                const unitprice = +this.item.unitprice;

                return unitprice.toFixed(2);
            },

            quantityprice() {
                const quantityprice = +this.item.quantityprice;

                return quantityprice.toFixed(2);
            },

            currentPage() {
                return this.$route.path;
            }
        },

        methods: {
            updateQuantity() {                
                this.item.quantityprice = this.unitprice * this.item.quantity;
            },

            deleteEvent: function(e) {
                console.log(this.item)
                console.log('delete clicked')
                //this.events.splice(this.events.indexOf(e), 1);
            }
        }
    }
</script>

console.log(this.item) give the following for each click of the button. The details in these are correct for the row:

Screenshot

The only things I can seem to find are when everything is in the SAME component which mine isn't.

Answer 1

You are using Vuex so you 1st need to define mutation and action to delete the item from store state.

Now you can trigger that action easily like this:

// Order detail VUE
deleteEvent: function(e) {
  this.$store.dispatch('deleteItem', this.item)
}

Answer 2

You could do something like this, first pass item id to your delteEvent method:

 @click.prevent="deleteEvent(item.id)" // or pass item.servicename or even just item

in deleteEvent(itemId) method then you can do what ever you want, e.g make a delete request to server to delete that particular item or search for it in array of items and slice them etc..