L8 ending code

index.html

@@ -20,7 +20,8 @@
             <img v-bind:src="image">
           </div>
           <div class="product-info">
-            <h1>{{ product }}</h1>
+            <h1>{{ title }}</h1>
+
             <p v-if="inStock">In Stock</p>
             <p v-else>Out of Stock</p>
             <ul>
@@ -28,11 +29,13 @@
             </ul>
 
             <div 
-              class="color-circle" 
+              v-for="(variant, index) in variants" 
-              v-for="variant in variants" 
               :key="variant.id" 
-              @mouseover="updateImage(variant.image)" 
+              @mouseover="updateVariant(index)" 
-              :style="{ backgroundColor: variant.color }"></div>
+              class="color-circle" 
+              :style="{ backgroundColor: variant.color }">
+            </div>
+            
             <button class="button" :class="{ disabledButton: !inStock }" :disabled="!inStock" v-on:click="addToCart">Add to Cart</button>
           </div>
         </div>

main.js

@@ -4,12 +4,11 @@ const app = Vue.createApp({
             cart:0,
             product: 'Socks',
             brand: 'Vue Mastery',
-            image: './assets/images/socks_blue.jpg',
+            selectedVariant: 0,
-            inStock: false,
             details: ['50% cotton', '30% wool', '20% polyester'],
             variants: [
-              { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
+              { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 },
-              { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
+              { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 },
             ]
         }
     },
@@ -17,8 +16,19 @@ const app = Vue.createApp({
         addToCart() {
             this.cart += 1
         },
-        updateImage(variantImage) {
+        updateVariant(index) {
-            this.image = variantImage
+            this.selectedVariant = index
+        }
+    },
+    computed: {
+        title() {
+            return this.brand + ' ' + this.product
+        },
+        image() {
+            return this.variants[this.selectedVariant].image
+        },
+        inStock() {
+            return this.variants[this.selectedVariant].quantity
         }
     }
 })