5B. Turn product into a @Prop() product!: any of Product.vue

Author: YentlItenium

cli-socks/src/components/Product.vue

@@ -68,18 +68,7 @@ import ProductReview from './ProductReview.vue';
 export default class Product extends Vue {
   @Prop({default: false}) private premium!: boolean;
   @Prop() private cartLength!: number;
-
-  product = {
-    name: "Vue Socks",
-    brand: "Vue",
-    price: 5,
-    variants: [
-      {id: 1, color: "green", inventory: 3},
-      {id: 2, color: "blue", inventory: 5}
-    ],
-    inventory: 3,
-    reviews: []
-  };
+  @Prop() private product!: any;
 
   selectedVariantIndex = 0;
 

cli-socks/src/store.ts

@@ -9,31 +9,28 @@ const productList = [{
   brand: "Vue",
   price: 5,
   variants: [
-    {id: 1, color: "green"},
-    {id: 2, color: "blue"}
+    {id: 1, color: "green", inventory: 4},
+    {id: 2, color: "blue", inventory: 4}
   ],
-  inventory: 3,
   reviews: []
 },
 {
   name: "Angular Socks",
-  brand: "angular",
+  brand: "Angular",
   price: 15,
   variants: [
-    {id: 1, color: "red"},
-    {id: 2, color: "blue"}
+    {id: 1, color: "red", inventory: 4},
+    {id: 2, color: "blue", inventory: 4}
   ],
-  inventory: 3,
   reviews: []
 },
 {
   name: "npm Socks",
   brand: "npm",
   price: 3,
   variants: [
-    {id: 1, color: "red"},
+    {id: 1, color: "red", inventory: 4},
   ],
-  inventory: 3,
   reviews: []
 }];
 

cli-socks/src/views/Home.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <Product :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart" :cartLength="cart.length"></Product>
+    <Product v-for="product in products"
+             :key="product.brand"
+             :premium="premium"
+             :product="product"
+             @add-to-cart="updateCart"
+             @remove-from-cart="removeFromCart"
+             :cartLength="cart.length"></Product>
 
     <div class="cart">
       {{ cart.length }}
@@ -22,6 +28,10 @@ export default class Home extends Vue {
   premium = true;
   cart: string[] = [];
 
+  get products() {
+      return this.$store.state.products;
+  }
+
   updateCart(product: any) {
     console.log("Adding to cart:", product);
     this.cart.push(product);