将商品添加到购物车并从购物车中移除

Question

我有一个 + 按钮可以将商品添加到购物车，它可以工作。 但与此同时，当购物车中的数字增加时，我需要显示库存的数字将减少库存的数字，显示它不起作用……

我需要对 - 按钮做同样的事情

当我从购物车中添加或删除商品时，我真的需要更改显示的inStock编号 有人可以帮我吗？ 我是新手

Vue.component('product', {

    template: 
    `
     <div class="product">
          
        <div class="product-image">
          <img :src="image" />
        </div>
  
        <div class="product-info">
            <h1>{{ product }}</h1>
            <p v-if="inStock">In Stock {{inStock}}</p>
            <p v-else>Out of Stock</p>
  
            <button @click="addToCart" 
              :disabled="!inStock"
              :class="{ disabledButton: !inStock }"> + </button>

            <button @click="removeFromCart"> - </button>
  
         </div>  
      
      </div>
     `,
    data() {
      return {
          product: 'Hoodie',
          image: 'hoodie.jpeg',
          inStock: 10,
          cart: 0
      }
    },
      methods: {
        addToCart: function() {
            this.$emit('add-to-cart')
        },
        removeFromCart: function() {
             this.$emit('remove-from-cart')
        }
      }
  })
  
  var app = new Vue({
      el: '#app',
      data: {
        cart: 0,
        inStock: 10
      },
      methods: {
        updateCart() {
          this.cart  += 1,
          this.inStock -= 1,
        },
        removeItem() {
          this.cart  -= 1,
          this.inStock += 1
        }
      }
  })

HTML：

<div class="nav-bar"></div>

            <div id="app">
            <div class="cart">
                <p>Cart({{ cart }})</p>
            </div>
            <product @add-to-cart="updateCart" @remove-from-cart="removeItem"></product>
            </div> 

Answer 1

在您的组件内，删除数据属性inStock和cart和props部分。

Vue.component('product', {

    template: 
    `
     <div class="product">
          
        <div class="product-image">
          <img :src="image" />
        </div>
  
        <div class="product-info">
            <h1>{{ product }}</h1>
            <p v-if="inStock">In Stock {{inStock}}</p>
            <p v-else>Out of Stock</p>
  
            <button @click="addToCart" 
              :disabled="!inStock"
              :class="{ disabledButton: !inStock }"> + </button>

            <button @click="removeFromCart"> - </button>
  
         </div>  
      
      </div>
     `,
    data() {
      return {
          product: 'Hoodie',
          image: 'hoodie.jpeg',
      }
    },
    props: {
      inStock: {
        type: Number,
        default: 0
      },
      cart : {
        type: Number,
        default: 0
      }
    },
      methods: {
        addToCart: function() {
            this.$emit('add-to-cart')
        },
        removeFromCart: function() {
             this.$emit('remove-from-cart')
        }
      }
  })
  
  var app = new Vue({
      el: '#app',
      data: {
        cart: 0,
        inStock: 10
      },
      methods: {
        updateCart() {
          this.cart  += 1,
          this.inStock -= 1,
        },
        removeItem() {
          this.cart  -= 1,
          this.inStock += 1
        }
      }
  })

然后在您的父组件中，传递道具。

父组件 (HTML)

<div class="nav-bar"></div>

            <div id="app">
            <div class="cart">
                <p>Cart({{ cart }})</p>
            </div>
            <!-- changes for props added below -->
            <product :cart="cart" :inStock="inStock" @add-to-cart="updateCart" @remove-from-cart="removeItem"></product>
            </div>