added lesson 38 code

Shaun Pelling · Shaun Pelling · commit e53d0ecfd0ac · 2017-04-03T16:55:59.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,19 @@
 <template>
     <div>
         <show-blogs></show-blogs>
+        <list-blogs></list-blogs>
     </div>
 </template>
 
 <script>
 // Imports
 import showBlogs from './components/showBlogs.vue';
+import listBlogs from './components/listBlogs.vue';
 
 export default {
     components: {
-        'show-blogs': showBlogs
+        'show-blogs': showBlogs,
+        'list-blogs': listBlogs
     },
     data () {
         return {
diff --git a/src/components/listBlogs.vue b/src/components/listBlogs.vue
@@ -0,0 +1,42 @@
+<template>
+    <div id="show-blogs">
+        <h1>List Blog Titles</h1>
+        <input type="text" v-model="search" placeholder="search blogs" />
+        <div v-for="blog in filteredBlogs" class="single-blog">
+            <h2>{{ blog.title }}</h2>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
+export default {
+    data () {
+        return {
+            blogs: [],
+            search: ''
+        }
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
+            this.blogs = data.body.slice(0,10);
+        });
+    },
+    mixins: [searchMixin]
+}
+</script>
+
+<style>
+#show-blogs{
+    max-width: 800px;
+    margin: 0px auto;
+}
+.single-blog{
+    padding: 20px;
+    margin: 20px 0;
+    box-sizing: border-box;
+    background: #eee;
+}
+</style>
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
@@ -3,50 +3,29 @@
         <h1>All Blog Articles</h1>
         <input type="text" v-model="search" placeholder="search blogs" />
         <div v-for="blog in filteredBlogs" class="single-blog">
-            <h2 v-rainbow>{{ blog.title | toUppercase }}</h2>
+            <h2>{{ blog.title }}</h2>
             <article>{{ blog.body }}</article>
         </div>
     </div>
 </template>
 
 <script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
 export default {
     data () {
         return {
             blogs: [],
             search: ''
         }
-    },
-    methods: {
-
     },
     created() {
         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);
-            });
-        }
-    },
-    filters: {
-        /*'to-uppercase': function(value){
-            return value.toUpperCase();
-        }*/
-        toUppercase(value){
-            return value.toUpperCase();
-        }
-    },
-    directives: {
-        'rainbow' :{
-            bind(el, binding, vnode){
-                el.style.color = "#" + Math.random().toString(16).slice(2, 8);
-            }
-        }
-    }
+    mixins: [searchMixin]
 }
 </script>
 
diff --git a/src/main.js b/src/main.js
@@ -5,12 +5,6 @@ import App from './App.vue'
 // Use vue-resource package
 Vue.use(VueResource);
 
-// Filters
-/*
-Vue.filter('to-uppercase', function(value){
-    return value.toUpperCase();
-}); */
-
 new Vue({
   el: '#app',
   render: h => h(App)
diff --git a/src/mixins/searchMixin.js b/src/mixins/searchMixin.js
@@ -0,0 +1,9 @@
+export default {
+    computed: {
+        filteredBlogs: function(){
+            return this.blogs.filter((blog) => {
+                return blog.title.match(this.search);
+            });
+        }
+    }
+};
