added lesson 42 code

Shaun Pelling · Shaun Pelling · commit 10edba9efb39 · 2017-04-03T17:55:10.000+01:00
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
@@ -3,7 +3,7 @@
         <h1>All Blog Articles</h1>
         <input type="text" v-model="search" placeholder="search blogs" />
         <div v-for="blog in filteredBlogs" class="single-blog">
-            <h2>{{ blog.title }}</h2>
+            <router-link v-bind:to="'/blog/' + blog.id"><h2>{{ blog.title }}</h2></router-link>
             <article>{{ blog.body }}</article>
         </div>
     </div>
@@ -40,4 +40,9 @@ export default {
     box-sizing: border-box;
     background: #eee;
 }
+
+#show-blogs a{
+    color: #444;
+    text-decoration: none;
+}
 </style>
diff --git a/src/components/singleBlog.vue b/src/components/singleBlog.vue
@@ -0,0 +1,34 @@
+<template>
+    <div id="single-blog">
+        <h1>{{ blog.title }}</h1>
+        <article>{{ blog.body }}</article>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
+export default {
+    data () {
+        return {
+            id: this.$route.params.id,
+            blog: {}
+        }
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts/' + this.id).then(function(data){
+            // console.log(data);
+            this.blog = data.body;
+        });
+    }
+}
+</script>
+
+<style>
+#single-blog{
+    max-width: 960px;
+    margin: 0 auto;
+}
+</style>
diff --git a/src/routes.js b/src/routes.js
@@ -1,7 +1,9 @@
 import addBlog from './components/addBlog.vue';
 import showBlogs from './components/showBlogs.vue';
+import singleBlog from './components/singleBlog.vue';
 
 export default [
     { path: '/', component: showBlogs},
-    { path: '/add', component: addBlog}
+    { path: '/add', component: addBlog},
+    { path: '/blog/:id', component: singleBlog}
 ]
