我正在尝试更新具有可编辑数量的产品列表,这会更新和更改产品价格的按行总计。请参阅下面的代码 -
<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 性成员。
最佳答案
在以下 html 代码中尝试使用 @input
代替 @change
:
<input type="number" :name="'order_items[' + index + '][qty]'" @change="product_quantity_changed($event, product)" />
关于javascript - 使用 $set 后 VueJS 不更新 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51494504/