Merge pull request #26 from kkj930/master

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

Author: Laoujin

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,7 +1,10 @@
 <template>
   <div>
-    <!--<Product :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart" :cartLength="cart.length"></Product>-->
-    <ProductLine v-for="k in products" :key="k.name" :product="k"></ProductLine>
+
+    <ProductLine v-for="product in products"
+             :key="product.brand"
+             :product="product"
+    ></ProductLine>
 
     <div class="cart">
       {{ cart.length }}
@@ -24,18 +27,11 @@ import { ProductModel } from '../models';
 })
 export default class Home extends Vue {
 
-  products: ProductModel[] = [];
   premium = true;
   cart: string[] = [];
 
-  constructor() {
-      super();
-      const product1 = new ProductModel();
-      product1.name = "product1";
-      const product2 = new ProductModel();
-      product2.name = "product2";
-      this.products.push(product1);
-      this.products.push(product2);
+  get products() {
+      return this.$store.state.products;
   }
 
   updateCart(product: any) {