Added back button and image navigation

Author: ba0708

src/ProductList.vue

@@ -2,7 +2,7 @@
     <div id="products" class="row list-group">
         <div v-for="product in products" class="item col-xs-4">
             <div class="thumbnail">
-                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff">
+                <img @click="clickedImage(product)" class="group list-group-image" src="http://placehold.it/400x250/000/fff">
                 <div class="caption">
                     <router-link
                             :to="{ name: 'viewProduct', params: { productId: product.id } }"
@@ -48,6 +48,14 @@
                     product: product,
                     quantity: quantity
                 });
+            },
+            clickedImage(product) {
+                this.$router.push({
+                    name: 'viewProduct',
+                    params: {
+                        productId: product.id
+                    }
+                });
             }
         }
     }

src/ViewProduct.vue

@@ -1,5 +1,7 @@
 <template>
     <div>
+        <button class="btn btn-primary" @click="goBack">&laquo; Back</button>
+
         <h1>{{ product.name }}</h1>
         <p><strong>ID:</strong> {{ product.id }}</p>
         <p><strong>Price:</strong> {{ product.price | currency }}</p>
@@ -53,6 +55,9 @@
                 });
 
                 return match;
+            },
+            goBack() {
+                this.$router.push('/');
             }
         },
         computed: {