From c18a7e048633ed539c03f7f8212fe51d16992492 Mon Sep 17 00:00:00 2001 From: bwbl Date: Tue, 13 Jan 2026 15:38:59 +0100 Subject: [PATCH] L8 --- index.html | 97 ++++++++++++++++++++++++++++++------------------------ main.js | 76 +++++++++++++++++++++++++++++------------- 2 files changed, 107 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index afbbb13..90d6819 100644 --- a/index.html +++ b/index.html @@ -1,50 +1,61 @@ - - - Vue Mastery - - - - - - -
-
+ + + Vue Mastery + + + + + + +
+
-
Cart({{ cart }})
- -
-
-
- -
-
-

{{ product }}

-

In Stock

-

Out of Stock

-
    -
  • {{ detail }}
    • -
+
Cart({{ cart }})
-
- -
-
-
-
+
+
+
+ +
+
+

{{ title }}

+

+ {{ sale }} +

+

In Stock

+

Out of Stock

+
    +
  • {{ detail }}
    • +
- - +
+ +
+
+
+
- - - + + + + + + diff --git a/main.js b/main.js index 7470f07..5c3486d 100644 --- a/main.js +++ b/main.js @@ -1,24 +1,54 @@ const app = Vue.createApp({ - data() { - return { - cart:0, - product: 'Socks', - brand: 'Vue Mastery', - image: './assets/images/socks_blue.jpg', - inStock: false, - details: ['50% cotton', '30% wool', '20% polyester'], - variants: [ - { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' }, - { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' }, - ] - } - }, - methods: { - addToCart() { - this.cart += 1 - }, - updateImage(variantImage) { - this.image = variantImage - } - } -}) + data() { + return { + cart: 0, + product: "Socks", + brand: "Vue Mastery", + //image: "./assets/images/socks_blue.jpg", + //inStock: false, + selectedVariant: 0, + details: ["50% cotton", "30% wool", "20% polyester"], + variants: [ + { + id: 2234, + color: "green", + image: "./assets/images/socks_green.jpg", + quantity: 50, + onSale: true, + }, + { + id: 2235, + color: "blue", + image: "./assets/images/socks_blue.jpg", + quantity: 0, + onSale: false, + }, + ], + }; + }, + methods: { + addToCart() { + this.cart += 1; + }, + updateImage(variantImage) { + this.image = variantImage; + }, + 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; + }, + sale() { + return this.brand + " " + this.product + " is on sale"; + }, + }, +});