From a5ea40c4526e3b45ed7362a995add9ce2b5b9849 Mon Sep 17 00:00:00 2001 From: bwbl Date: Tue, 13 Jan 2026 14:23:10 +0100 Subject: [PATCH] L5 --- index.html | 77 +++++++++++++++++++++++++++++++----------------------- main.js | 23 +++++++++------- 2 files changed, 59 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index d05fc74..d5236e6 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,50 @@ - - - Vue Mastery - - - - - - -
-
- -
-
-
- -
-
-

{{ product }}

-

In Stock

-

Out of Stock

-
-
-
-
+ + + Vue Mastery + + + + + + +
+
- - +
+
+
+ +
+
+

{{ product }}

+

In Stock

+

Out of Stock

+
    +
  • {{ detail }}
    • +
+ +
+ {{ variant.color }} +
+ +
{{ size }}
+
+
+
+
- - - + + + + + + diff --git a/main.js b/main.js index 1725ec2..d9dacf2 100644 --- a/main.js +++ b/main.js @@ -1,10 +1,15 @@ const app = Vue.createApp({ - data() { - return { - product: 'Socks', - image: './assets/images/socks_blue.jpg', - inStock: true, - details: ['50% cotton', '30% wool', '20% polyester'] - } - } -}) + data() { + return { + product: "Socks", + image: "./assets/images/socks_blue.jpg", + inStock: true, + details: ["50% cotton", "30% wool", "20% polyester"], + variants: [ + { id: 2234, color: "green" }, + { id: 2235, color: "blue" }, + ], + sizes: ["S", "M", "L", "XL"], + }; + }, +});