Mahmud Adam Mahmud Adam - 5 months ago 111
Javascript Question

Vue.js computed property to update quantity

I have a simple shopping cart app, and I have it so that the user can add items to the cart and then remove them (using a

@click
event). The problem I am facing is that I cannot figure out how to update the quantity in my
Product
after I remove an item from the
Cart
. Here is the relevant part from my
index.html
:

<span v-for="item in items">
<h3>Product</h3>
Item: {{item.name}}<br>
Price: {{item.price}}<br>
Quantity: {{inStock > 0 ? inStock : 'Out of Stock'}}<br>
<button
class="btn btn-primary"
:disabled="inStock===0"
@click="addToCart(item)">
Add to Cart
</button>
</span>


Here is a fiddle containing the
Vue
instance: https://jsfiddle.net/Amidi/yzwrzugz/1/

Answer

You could increase the item.stock value into the remove method:

remove: function (item) {
  this.itemInCart.splice(item, 1)
  var updateStock = this.items[0].stock
  item.stock++
  this.restock.push(updateStock)
}