將商品添加到購物車並從購物車中移除

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>