Vue.js 计算属性来更新数量

Question

我有一个简单的购物车应用程序，我拥有它以便用户可以将商品添加到购物车然后删除它们（使用@click 事件）。我面临的问题是，在我从Cart 中删除一个项目后，我无法弄清楚如何更新我的Product 中的数量。这是我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>

这是一个包含Vue 实例的小提琴：https://jsfiddle.net/Amidi/yzwrzugz/1/

Answer 1

您可以将item.stock 的值增加到remove 方法中：

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