L5

index.html

@@ -15,12 +15,25 @@
 			<div class="product-display">
 				<div class="product-container">
 					<div class="product-image">
-            <img v-bind:src="image">
+						<img v-bind:src="image" />
 					</div>
 					<div class="product-info">
 						<h1>{{ product }}</h1>
 						<p v-if="inStock">In Stock</p>
 						<p v-else>Out of Stock</p>
+						<ul>
+							<li v-for="detail in details">{{ detail }}</li>
+						</ul>
+						<label for="variants">Variants</label>
+						<div
+							id="variants"
+							v-for="variant in variants"
+							:key="variant.id"
+						>
+							{{ variant.color }}
+						</div>
+						<label for="Size">Size</label>
+						<div id="Size" v-for="size in sizes">{{ size }}</div>
 					</div>
 				</div>
 			</div>
@@ -31,7 +44,7 @@
 
 		<!-- Mount App -->
 		<script>
-      const mountedApp = app.mount('#app')
+			const mountedApp = app.mount("#app");
 		</script>
 	</body>
 </html>

main.js

@@ -1,10 +1,15 @@
 const app = Vue.createApp({
 	data() {
 		return {
-            product: 'Socks',
+			product: "Socks",
-            image: './assets/images/socks_blue.jpg',
+			image: "./assets/images/socks_blue.jpg",
 			inStock: true,
-            details: ['50% cotton', '30% wool', '20% polyester']
+			details: ["50% cotton", "30% wool", "20% polyester"],
-        }
+			variants: [
-    }
+				{ id: 2234, color: "green" },
-})
+				{ id: 2235, color: "blue" },
+			],
+			sizes: ["S", "M", "L", "XL"],
+		};
+	},
+});