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

我正在尝试用可编辑的数量更新产品列表，这将更新和更改产品价格的行总值。请参阅下面我的代码-

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

#
名称
数量。
价格
{{index+1}}
{{product.name}
{{product.purchase\u currency}{{{product.total\u price}}
导出默认值{
名称：“表单采购订单项目”，
道具：[
“产品搜索路径”，
],
数据（）{
返回{
产品清单：[]
};
},
安装的（）{
},
方法：{
/**
*
*@param乘积
*/
新增产品（产品）
{
产品数量=1；
product.total\u price=product.supplier.purchase\u price；
if（！this.product_list.find（（v）=>{return v.id==product.id}））
此.产品列表.推送（产品）；
},
/**
*
*@param乘积
*/
产品数量变更（e，产品）
{
var数量=数量（如目标值）；
本.$套（产品，'数量'，数量）；
此.$set（产品，'总价'，（数量*产品.供应商.采购价格））；
}
},
观察：{
}
}

通过Vue DevTools可以看到，价格总计确实正确更新，但是，

{{product.purchase\u currency}}{{product.total\u price}}

列没有反映所做的更改。我已经阅读了文档，我认为这里没有提到这一点

编辑：

---

在

product\u added（product）

回调中收到对象后，将创建两个成员

quantity

和

total\u price

。这可能使它们成为对象的非反应成员

在以下html代码中尝试

@input

而不是

@change

：

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

---

在以下html代码中尝试

@input

而不是

@change

：

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

---

我可以通过制作

数量

和

总价

被动会员来解决这个问题

        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);
        },

---

我可以通过制作

数量

和

总价

被动会员来解决这个问题

        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);
        },

---

试着不要将

product

传递到@change中，只需传递

索引

，然后在

上使用
$set
方法。产品列表[index]

并查看是否有效？@Zlatev我也尝试过，结果与当前代码相同。设置v-for:key（）也值得一试。更改了值后，您需要将焦点从输入转移到激发更改处理程序，我建议使用

input

事件，这样会提供更多信息。

$set

仅处理vue数据！您的产品不是vue数据！是临时数组数据@SagunKhoTry没有将

产品

传递到@change中，而只是传递

索引

，然后在

上使用
$set
方法。产品列表[index]

看看是否有效？@Zlatev我也尝试过，结果与当前代码相同。设置v-for:key（）也值得一试。更改了值后，您需要将焦点从输入转移到激发更改处理程序，我建议使用

input

事件，这样会提供更多信息。

$set

仅处理vue数据！您的产品不是vue数据！这是SagunKho的临时数组数据