Building an E-Commerce Store - Adding a Checkout Chapter 11{{ product.variationTitle }}
</td>
<td>{{ product.variation.price | currency }}</td>
<td v-if="!editable">{{ product.quantity }}</td>
<td v-if="editable">
<input
type="text"
:value="product.quantity"
@blur="updateQuantity($event, product.sku)"
>
</td>
<td>{{ product.variation.price * product.quantity | currency }}</td>
</tr>
</tbody>Create the new method on the component. This method should loop through the products,
locating the one with a matching SKU and updating the quantity to an integer. We also
need to update the store with the result - so that the quantity can be updated at the top of
the page. We'll create a general mutation that accepts the full basket array back with new
values to allow the same one to be used for the product deletion.
Create the mutation that updates the quantity and commits a mutation
titled updatePurchases:
methods: {
updateQuantity(e, sku) {
let products = this.products.map(p => {
if(p.sku == sku) {
p.quantity = parseInt(e.target.value);
}
return p;
});this.$store.commit('updatePurchases', products);
}
}In the store, create the mutation that sets the state.basket equal to the payload:
updatePurchases(state, payload) {
state.basket = payload;
}Updating the quantity should now update the total price of the item and the basket count at
the top of the page.