From 025dc924ab65942c5dd0e2b62c2e5242d270055b Mon Sep 17 00:00:00 2001 From: bwbl Date: Tue, 13 Jan 2026 15:16:00 +0100 Subject: [PATCH] L7 --- index.html | 114 +++++++++++++++++++++++++++++++++-------------------- main.js | 54 ++++++++++++++----------- 2 files changed, 103 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index 1c77b32..0b6068d 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,79 @@ - - - Vue Mastery - - - - - - -
-
+ + + Vue Mastery + + + + + + +
+
-
Cart({{ cart }})
- -
-
-
- -
-
-

{{ product }}

-

In Stock

-

Out of Stock

-
    -
  • {{ detail }}
    • -
+
Cart({{ cart }})
-
{{ variant.color }}
- -
-
-
-
+
+
+
+ +
+
+

{{ product }}

+

In Stock

+

Out of Stock

+
    +
  • {{ detail }}
    • +
- - +
+ +
+
+
+
- - - + + + + + + + + diff --git a/main.js b/main.js index 7470f07..0ce09fa 100644 --- a/main.js +++ b/main.js @@ -1,24 +1,32 @@ 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, + 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; + }, + }, +});