eladcandroid · July 8, 2019 13:25
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>My App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router.js"></script>
  </head>
  <body>
    <style>
      .product {
        border: 1px solid black;
        float: left;
        height: 200px;
        width: 300px;
        margin: 10px;
        padding: 20px;
      }
      .add-to-cart {
        background-color: rgba(171, 171, 247, 0.794);
        color: #000;
        font-size: 20px;
        border-radius: 10px;
        width: 100%;
      }
      .menu {
          margin: 30px;
      }
    </style>
    <div id="app">
      <div class="menu">
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link>
      </div>  
      <router-view></router-view>
    </div>

    <script>
    const products = [
                    {
                    id: 1,
                    description: 'Black Shoes',
                    longDescription: 'The best shoes ever ever ever! Come and get one!!!!!',
                    image: 'images/black-shoes.jpg'
                    },
                    {
                    id: 2,
                    description: 'Funny T-Shirt',
                    longDescription: 'Our T-Shirt made from good meterials with a great and funny faces painting',
                    image: 'images/tshirt.jpg'
                    }
                ];

      const Home = Vue.component('home', {
        template: `<div>
          <cart :count="cartCount" :cart-products="cartProducts"></cart>
            <product class="product" v-for="product in products" 
            :description="product.description" 
            :key="product.id"
            :id="product.id"
            :image="product.image" @add-to-cart="addToCart"></product>
        </div>`,
        methods: {
          addToCart(id) {
            this.cartCount++;
            const product = this.products.find(product=> product.id === id)
            this.cartProducts.push(product)
          }
        },
        data() {
            return {
                products,
                cartProducts: [

                ],
                cartCount: 0
                }        
            }
      })
      const NotFound = Vue.component('not-found', {
        template: `<div>
          The page is not found
        </div>`
      })
      const NotAvailable = Vue.component('not-available', {
        template: `<div>
          This item is not available
        </div>`
      })
      const About = Vue.component('about', {
        template: `<div>
          About our store....
        </div>`
      })
      Vue.component('cart', {
        props: ['count', 'cartProducts'],
        template: `<div>
          <img src="images/cart.png" width="40"/>
          <span>{{count}}</span>
          <ul>
            <li v-for="cartProduct in cartProducts">{{cartProduct.description}}</li>
          </ul>
        </div>`
      })
      Vue.component('product', {
        props: ['description', 'image', 'id'],
        template: `<div>
        <button class="add-to-cart" 
        @click="$emit('add-to-cart', id)">Add to cart</button>
        <div class="description">Item Description: {{description}}</div>
        <div class="image"><img :src="image" width="100"/></div>

        <router-link :to="'/product/'+id">Show details</router-link>

        </div>`
      })
      const ProductDetails = Vue.component('product-details', {
        props: ['id'],
        data() {
            return {products}
        },
        // mounted() {
        //     this.product = this.products.find(product=> 
        //     product.id === +this.id)
        // },
        computed: {
            product() {
                if (this.products.length === 0) {
                    return {
                        id: null,
                        description: '',
                        longDescription: ''
                    }
                }
                const res = this.products.find(product=> 
            product.id === +this.id);
                if (!res) {
                    // go to 404
                    return;
                }
                return this.products.find(product=> 
            product.id === +this.id)
            }
        },
        template: `<div>
            <div v-if="product">{{product.longDescription}}</div>
            <div v-else>The product is not found</div>
        </div>`,

      })

      const router = new VueRouter({
          routes: [
              {'path': '/', component: Home},
              {'path': '/about', component: About},
              {'path': '/product/:id', component: ProductDetails, props: true},
              {'path': '*', component: NotFound},
            //   {'path': '/404', component: NotAvailable},
          ]
      })

      new Vue({
        el: '#app',
        router
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>My App</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script src="lib/vue.js"></script>
	<script src="lib/vue-router.js"></script>
	</head>
	<body>
	<style>
	.product {
	border: 1px solid black;
	float: left;
	height: 200px;
	width: 300px;
	margin: 10px;
	padding: 20px;
	}
	.add-to-cart {
	background-color: rgba(171, 171, 247, 0.794);
	color: #000;
	font-size: 20px;
	border-radius: 10px;
	width: 100%;
	}
	.menu {
	margin: 30px;
	}
	</style>
	<div id="app">
	<div class="menu">
	<router-link to="/">Home</router-link> \|
	<router-link to="/about">About</router-link>
	</div>
	<router-view></router-view>
	</div>

	<script>
	const products = [
	{
	id: 1,
	description: 'Black Shoes',
	longDescription: 'The best shoes ever ever ever! Come and get one!!!!!',
	image: 'images/black-shoes.jpg'
	},
	{
	id: 2,
	description: 'Funny T-Shirt',
	longDescription: 'Our T-Shirt made from good meterials with a great and funny faces painting',
	image: 'images/tshirt.jpg'
	}
	];

	const Home = Vue.component('home', {
	template: `<div>
	<cart :count="cartCount" :cart-products="cartProducts"></cart>
	<product class="product" v-for="product in products"
	:description="product.description"
	:key="product.id"
	:id="product.id"
	:image="product.image" @add-to-cart="addToCart"></product>
	</div>`,
	methods: {
	addToCart(id) {
	this.cartCount++;
	const product = this.products.find(product=> product.id === id)
	this.cartProducts.push(product)
	}
	},
	data() {
	return {
	products,
	cartProducts: [

	],
	cartCount: 0
	}
	}
	})
	const NotFound = Vue.component('not-found', {
	template: `<div>
	The page is not found
	</div>`
	})
	const NotAvailable = Vue.component('not-available', {
	template: `<div>
	This item is not available
	</div>`
	})
	const About = Vue.component('about', {
	template: `<div>
	About our store....
	</div>`
	})
	Vue.component('cart', {
	props: ['count', 'cartProducts'],
	template: `<div>
	<img src="images/cart.png" width="40"/>
	<span>{{count}}</span>
	<ul>
	<li v-for="cartProduct in cartProducts">{{cartProduct.description}}</li>
	</ul>
	</div>`
	})
	Vue.component('product', {
	props: ['description', 'image', 'id'],
	template: `<div>
	<button class="add-to-cart"
	@click="$emit('add-to-cart', id)">Add to cart</button>
	<div class="description">Item Description: {{description}}</div>
	<div class="image"><img :src="image" width="100"/></div>

	<router-link :to="'/product/'+id">Show details</router-link>

	</div>`
	})
	const ProductDetails = Vue.component('product-details', {
	props: ['id'],
	data() {
	return {products}
	},
	// mounted() {
	// this.product = this.products.find(product=>
	// product.id === +this.id)
	// },
	computed: {
	product() {
	if (this.products.length === 0) {
	return {
	id: null,
	description: '',
	longDescription: ''
	}
	}
	const res = this.products.find(product=>
	product.id === +this.id);
	if (!res) {
	// go to 404
	return;
	}
	return this.products.find(product=>
	product.id === +this.id)
	}
	},
	template: `<div>
	<div v-if="product">{{product.longDescription}}</div>
	<div v-else>The product is not found</div>
	</div>`,

	})

	const router = new VueRouter({
	routes: [
	{'path': '/', component: Home},
	{'path': '/about', component: About},
	{'path': '/product/:id', component: ProductDetails, props: true},
	{'path': '*', component: NotFound},
	// {'path': '/404', component: NotAvailable},
	]
	})

	new Vue({
	el: '#app',
	router
	});
	</script>
	</body>
	</html>