Question

我对VUE完全陌生，似乎无法弄清这种情况。

点击table，我需要从button中删除一行。

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

购物车的主要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>

在执行控制台日志时，我得到一个array，其中包含3个objects

然后在我的其他组件中循环并渲染row中的每个table

**订单明细VUE页面**

<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）每次单击按钮都会给出以下内容。这些详细信息对于该行是正确的

屏幕截图

我似乎唯一能找到的就是所有东西都在同一个组件中，而我的却不是

Answer 1

您正在使用Vuex，因此您首先需要定义mutation and action才能从商店状态中删除该商品。

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

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

Answer 2

您可以执行以下操作，首先将商品ID传递给您的delteEvent方法：

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

在deleteEvent（itemId）方法中，您可以做任何想做的事，例如向服务器发出删除请求以删除该特定项目，或者在项目数组中搜索并将其切片等。

使用Vue从表中删除行

2 个答案: