Vue.js 使用Vue从表中删除行

我对Vue完全陌生，似乎无法理解这种情况

单击

按钮

，我需要从

表中删除一行

下面是用于呈现页面的每个文件中的代码

主购物车Vue页面

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

<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）为每次单击按钮提供以下信息。这些中的详细信息适用于该行：


屏幕截图


我能找到的唯一东西似乎是当所有东西都在同一个组件中而我的不在该组件中时。
您可以这样做，首先将项目id传递给您的delteEvent方法：

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

在deleteEvent（itemId）方法中，您可以做任何您想做的事情，例如向服务器发出删除请求以删除该特定项目，或者在项目数组中搜索该项目并对其进行切片等
 您可以这样做，首先将项目id传递给delteEvent方法：

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

在deleteEvent（itemId）方法中，您可以做任何您想做的事情，例如向服务器发出删除请求以删除该特定项目，或者在项目数组中搜索该项目并对其进行切片等
 您正在使用Vuex，因此首先需要定义从存储状态删除项目

现在，您可以像这样轻松地触发该操作：

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

您正在使用Vuex，因此首先需要定义从存储状态删除项目

现在，您可以像这样轻松地触发该操作：

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