|
@@ -42,6 +42,7 @@ const productTemplate = `<div class="product">
|
|
|
:disabled="!inStock"
|
|
|
:class="{ disabledButton: !inStock }"
|
|
|
>Add to cart</button>
|
|
|
+ <button v-on:click="removeFromCart">Remove</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
@@ -115,10 +116,14 @@ Vue.component("product", {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- addToCart(mouseEvent) {
|
|
|
+ addToCart() {
|
|
|
this.variants[this.selectedVariant].variantQuantity--;
|
|
|
this.$emit("add-to-cart", this.variants[this.selectedVariant].variantId);
|
|
|
},
|
|
|
+ removeFromCart() {
|
|
|
+ this.variants[this.selectedVariant].variantQuantity++;
|
|
|
+ this.$emit("remove-from-cart", this.variants[this.selectedVariant].variantId);
|
|
|
+ },
|
|
|
updateImage(index) {
|
|
|
this.selectedVariant = index;
|
|
|
}
|
|
@@ -132,8 +137,15 @@ const app = new Vue({
|
|
|
isPremium: false,
|
|
|
},
|
|
|
methods: {
|
|
|
+ removeItem(id) {
|
|
|
+ console.log("removeItem", id);
|
|
|
+ const index = this.cart.indexOf(id);
|
|
|
+ if (index > -1) {
|
|
|
+ this.cart.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
updateCart(id) {
|
|
|
- console.log("uC", id);
|
|
|
+ console.log("updateCart", id);
|
|
|
this.cart.push(id);
|
|
|
}
|
|
|
}
|