issue6 delete button for cart

Author: TheLoof

01-HelloWorld/01-Socks.html

@@ -35,7 +35,7 @@ <h1>{{ product }}</h1>
 
           <!-- Events -->
           <button
-            v-on:click="cart++; inventory--"
+            v-on:click="addToCart"
             :disabled="!inventory"
             class="add-to-cart"
             :class="inventory ? '' : 'disabledButton'"

cli-socks/src/components/Product.vue

@@ -28,6 +28,14 @@
           Add to Cart
         </button>
 
+        <button
+          @click="removeFromCart"
+          :disabled="cartLength === 0"
+          :class="['remove-from-cart', cartLength > 0 ? '' : 'disabledButton']"
+        >
+          Remove from cart
+        </button>
+
         <div v-for="(variant, index) in product.variants"
             :key="variant.id"
             class="color-box"
@@ -52,6 +60,7 @@ import ProductReview from './ProductReview.vue';
 })
 export default class Product extends Vue {
   @Prop({default: false}) private premium!: boolean;
+  @Prop() private cartLength: number;
 
   product = {
     name: "Vue Socks",
@@ -83,6 +92,12 @@ export default class Product extends Vue {
     this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
   }
 
+  removeFromCart() {
+    this.product.inventory++;
+    const selectedVariant = this.product.variants[this.selectedVariantIndex];
+    this.$emit('remove-from-cart', {product: this.product, variant: selectedVariant})
+  }
+
   addReview(review: any) {
     const reviews = this.product.reviews as any;
     reviews.push(review.rating);
@@ -141,6 +156,18 @@ button.add-to-cart {
   position: absolute;
   top: 85px;
   right: 13px;
+}
+
+button.remove-from-cart {
+  border: none;
+  background-color: #F12321;
+  color: white;
+  height: 40px;
+  width: 100px;
+  font-size: 14px;
+  position: absolute;
+  top: 135px;
+  right: 13px;
 } 
 
 .disabledButton {

cli-socks/src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Product :premium="premium" @add-to-cart="updateCart"></Product>
+    <Product :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart" :cartLength="cart.length"></Product>
 
     <div class="cart">
       {{ cart.length }}
@@ -26,5 +26,10 @@ export default class Home extends Vue {
     console.log("Adding to cart:", product);
     this.cart.push(product);
   }
+
+  removeFromCart(product: any) {
+    let index = this.cart.indexOf(product);
+    this.cart.splice(index);
+  }
 }
 </script>