Question

我正在尝试更新数量可编辑的产品列表，以更新和更改行的总价格。请在下面查看我的代码-

<template>
    <div>
        <product-search-bar :product_search_route="product_search_route" />

        <table class="table table-hover table-responsive table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Qty.</th>
                <th>Price</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(product, index) in product_list">
                <td>
                    {{ index + 1 }}
                    <input type="hidden" :name="'order_items[' + index + '][id]'" :value="product.id" />
                </td>
                <td>{{ product.name }}</td>
                <td>
                    <input type="number" :name="'order_items[' + index + '][qty]'" @change="product_quantity_changed($event, product)" />
                </td>
                <td>{{ product.purchase_currency }} {{ product.total_price }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: 'form-purchase-order-items',
        props: [
            'product_search_route',
        ],
        data() {
            return {
                product_list: []
            };
        },
        mounted() {
        },
        methods: {
            /**
             *
             * @param product
             */
            product_added(product)
            {
                product.quantity = 1;
                product.total_price = product.supplier.purchase_price;

                if (!this.product_list.find((v) => { return v.id == product.id }))
                    this.product_list.push(product);
            },

            /**
             *
             * @param product
             */
            product_quantity_changed(e, product)
            {
                var quantity = Number(e.target.value);
                this.$set(product, 'quantity', quantity);
                this.$set(product, 'total_price', (quantity * product.supplier.purchase_price));
            }
        },
        watch: {
        }
    }
</script>

通过Vue DevTools可以看到总价格确实正确更新，但是<td>{{ product.purchase_currency }} {{ product.total_price }}</td>列未反映所做的更改。我已经阅读了文档，但我认为这里没有提到。

编辑：

在quantity回调中接收到对象之后，将创建两个成员total_price和product_added(product)。这可能使它们成为对象的非反应成员。

Answer 1

在以下HTML代码中，

尝试用@input代替@change：

<input type="number" :name="'order_items[' + index + '][qty]'" @change="product_quantity_changed($event, product)" />

Answer 2

我能够通过使quantity和total_price为反应成员来解决此问题。

        product_added(product)
        {
            this.$set(product, 'quantity', 1);
            this.$set(product, 'total_purchase_price', product.supplier.purchase_price);

            if (!this.product_list.find((v) => { return v.id == product.id }))
                this.product_list.push(product);
        },

VueJS在使用$ set后不更新视图

2 个答案: