added lesson 36 code

Shaun Pelling · Shaun Pelling · commit 9c1c6a0b4699 · 2017-04-03T16:26:02.000+01:00
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
@@ -1,7 +1,8 @@
 <template>
     <div id="show-blogs">
         <h1>All Blog Articles</h1>
-        <div v-for="blog in blogs" class="single-blog">
+        <input type="text" v-model="search" placeholder="search blogs" />
+        <div v-for="blog in filteredBlogs" class="single-blog">
             <h2>{{ blog.title | to-uppercase }}</h2>
             <article>{{ blog.body }}</article>
         </div>
@@ -12,7 +13,8 @@
 export default {
     data () {
         return {
-            blogs: []
+            blogs: [],
+            search: ''
         }
     },
     methods: {
@@ -22,6 +24,13 @@ export default {
         this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
             this.blogs = data.body.slice(0,10);
         });
+    },
+    computed: {
+        filteredBlogs: function(){
+            return this.blogs.filter((blog) => {
+                return blog.title.match(this.search);
+            });
+        }
     }
 }
 </script>
