Theming with WP REST API - Part 08 - Getting Post Preview

ivandoric · Apr 5, 2016 · aeb1bc3 · aeb1bc3
1 parent 2786387
commit aeb1bc3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/index.php b/index.php
@@ -49,7 +49,9 @@
     <div class="container">
         <div class="post-list">
             <article v-for="post in posts | filterBy nameFilter in 'title' | filterBy categoryFilter in 'categories'" class="post">
-                <img v-bind:src="post.fi_300x180">
+                <a v-on:click="getThePost(post.id)">
+                    <img v-bind:src="post.fi_300x180">
+                </a>
                 <div class="post-content">
                     <h2>{{ post.title.rendered }}</h2>
                     <small v-for="category in post.cats">
@@ -60,6 +62,18 @@
         </div>
     </div>
 
+    <div class="single-preview">
+        <h2>{{ post[0].title.rendered }}</h2>
+
+        <div class="image">
+            <img v-bind:src="post[0].fi_300x180">
+        </div>
+
+        <div class="post-content">
+            {{{ post[0].excerpt.rendered }}}
+        </div>
+    </div>
+
 </template>
 
 <?php get_footer(); ?>
diff --git a/js/app.js b/js/app.js
@@ -10,7 +10,8 @@ var postList = Vue.extend({
             categories: '',
             showFilter: false,
             filterBtnOpen: true,
-            filterBtnClose: false
+            filterBtnClose: false,
+            post:''
         }
     },
 
@@ -28,6 +29,17 @@ var postList = Vue.extend({
     },
 
     methods: {
+        getThePost: function(id){
+            var posts = this.posts;
+
+            function filterPosts(el){
+                return el.id == id;
+            }
+
+            this.$set('post', posts.filter(filterPosts));
+        },
+
+
         openFilter: function(){
             this.$set('showFilter', true);
             this.$set('filterBtnOpen', false);