Vue.js计算属性更新数量

Vue.js computed property to update quantity

本文关键字:更新 属性 js 计算 Vue      更新时间:2023-09-26

我有一个简单的购物车应用程序,我有它,以便用户可以添加商品到购物车,然后删除它们(使用@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/

您可以在remove方法中增加item.stock的值:

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