From 3251d861fc24122acf3f07127eb727667a619d38 Mon Sep 17 00:00:00 2001 From: bwbl Date: Tue, 13 Jan 2026 16:27:46 +0100 Subject: [PATCH] WIP L10.4 --- components/ProductDisplay.js | 107 +++++++++++++++++++---------------- index.html | 49 ++++++++-------- main.js | 20 ++++--- 3 files changed, 97 insertions(+), 79 deletions(-) diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js index 7fa9732..97aa671 100644 --- a/components/ProductDisplay.js +++ b/components/ProductDisplay.js @@ -1,13 +1,13 @@ -app.component('product-display', { - props: { - premium: { - type: Boolean, - required: true - } - }, - template: - /*html*/ - `
+app.component("product-display", { + props: { + premium: { + type: Boolean, + required: true, + }, + }, + template: + /*html*/ + `
@@ -42,41 +42,52 @@ app.component('product-display', {
`, - data() { - return { - product: 'Socks', - brand: 'Vue Mastery', - selectedVariant: 0, - details: ['50% cotton', '30% wool', '20% polyester'], - variants: [ - { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 }, - { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 }, - ] - } - }, - methods: { - addToCart() { - this.cart += 1 - }, - updateVariant(index) { - this.selectedVariant = index - } - }, - computed: { - title() { - return this.brand + ' ' + this.product - }, - image() { - return this.variants[this.selectedVariant].image - }, - inStock() { - return this.variants[this.selectedVariant].quantity - }, - shipping() { - if (this.premium) { - return 'Free' - } - return 2.99 - } - } -}) \ No newline at end of file + data() { + return { + product: "Socks", + brand: "Vue Mastery", + selectedVariant: 0, + details: ["50% cotton", "30% wool", "20% polyester"], + variants: [ + { + id: 2234, + color: "green", + image: "./assets/images/socks_green.jpg", + quantity: 50, + }, + { + id: 2235, + color: "blue", + image: "./assets/images/socks_blue.jpg", + quantity: 0, + }, + ], + }; + }, + methods: { + addToCart() { + this.$emit("add-to-cart", this.variants[this.selectedVariant].id); + this.cart += 1; + }, + updateVariant(index) { + this.selectedVariant = index; + }, + }, + computed: { + title() { + return this.brand + " " + this.product; + }, + image() { + return this.variants[this.selectedVariant].image; + }, + inStock() { + return this.variants[this.selectedVariant].quantity; + }, + shipping() { + if (this.premium) { + return "Free"; + } + return 2.99; + }, + }, +}); diff --git a/index.html b/index.html index c5b4a83..9edb7f1 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,33 @@ - - - Vue Mastery - - - - - - -
-
+ + + Vue Mastery + + + + + + +
+
-
Cart({{ cart }})
- -
+
Cart({{ cart.length }})
+ +
- - + + - - + + - - - + + + diff --git a/main.js b/main.js index c252e16..d650bc3 100644 --- a/main.js +++ b/main.js @@ -1,9 +1,13 @@ const app = Vue.createApp({ - data() { - return { - cart: 0, - premium: true - } - }, - methods: {} -}) + data() { + return { + cart: [], + premium: true, + }; + }, + methods: { + updateCart(id) { + this.cart.push(id); + }, + }, +});