One feature of my application involves a table that displays a list of products. Each product row in the table has an input field where users can enter the quantity they want to purchase. The total cost for each product is dynamically calculated by multiplying the quantity entered by the unit price. Here's how I've set up my table:
<table class="table table-striped table-borderd">
<template v-for="(c, catIndex) in products">
<tr>
<th>{{c.category}}</th>
<th>{{c.bulkSize}}</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr v-for="(p, productIndex) in c.productList">
<td>{{p.description}}</td>
<td>{{p.productSize}}</td>
<td>{{p.productPrice}}</td>
<td>
<input v-on:keyup='calculateTotal(catIndex, productIndex)' type="text" v-model="p.quantity" placeholder="Quantity">
</td>
<td>
<input
type="text"
readonly
v-model="p.total">
</td>
</tr>
</template>
</table>
To calculate the total, I've implemented a keyup event listener in JavaScript. Below is the code snippet:
calculateTotal: function(categoryIndex, productIndex) {
let currentCategory = this.products[categoryIndex];
let currentProduct = currentCategory.productList[productIndex];
currentProduct.total = currentProduct.quantity * currentProduct.productPrice;
console.log(this.products[categoryIndex].productList[productIndex].total);
}
Although the console log displays the correct value, the cell displaying the total does not update. This issue persists despite both the quantity and total keys being added to the product object through v-model.
I've attempted a fix based on suggestions but it hasn't resolved the problem. Here's the additional code snippet:
created: function() {
$.get('some endpoint', data => {
this.customers = data.customers;
this.locations = data.locations;
this.products = data.products;
this.products.forEach(cat => {
cat.productList.forEach(product => {
product.total = undefined;
})
})
});
}