javascript - 使用 $set 后 VueJS 不更新 View

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> 列不反射(reflect)所做的更改。我已阅读文档，我认为文档中没有提到这一点。

编辑:

两位成员quantity和total_price在 product_added(product) 中接收到对象后创建打回来。这可能使它们成为对象的非 react 性成员。

Answer 1

在以下 html 代码中尝试使用 @input 代替 @change:

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