filter>moment v-for v-if v-else mapstate 사용법

pages/instructor/blogs/index.vue

@@ -27,56 +27,44 @@
           </div>
           <div class="blogs-container">
             <template v-if="activeTab === 0">
-              <div>
-                <div class="blog-card">
-                  <h2>Some Title</h2>
+              <div v-if="drafts && drafts.length > 0">
+                <div 
+                  v-for="dBlog in drafts"
+                  :key="dBlog._id"
+                  class="blog-card">
+                  <h2>{{dBlog.title}}</h2>
                   <div class="blog-card-footer">
                     <span>
-                      Last Edited 17th December, 2018
-                    </span>
-                    <!-- Dropdown with menu here -->
-                  </div>
-                </div>
-                <div class="blog-card">
-                  <h2>Some Title</h2>
-                  <div class="blog-card-footer">
-                    <span>
-                      Last Edited 17th December, 2018
+                      Last Edited {{dBlog.updatedAt | formatDate('LLLL')}}
                     </span>
                     <!-- Dropdown with menu here -->
                   </div>
                 </div>
               </div>
               <!-- In case of no drafts blogs  -->
-              <!-- <div class="blog-error">
+              <div v-else class="blog-error">
                 No Drafts :(
-              </div> -->
+              </div>
             </template>
             <template v-if="activeTab === 1">
-              <div>
-                <div class="blog-card">
-                  <h2>Published Blog</h2>
+              <div v-if="published && published.length > 0">
+                <div 
+                  v-for="pBlog in published"
+                  :key="pBlog._id"
+                  class="blog-card">
+                  <h2>{{pBlog.title}}</h2>
                   <div class="blog-card-footer">
                     <span>
-                      Last Edited 17th December, 2018
-                    </span>
-                    <!-- Dropdown with menu here -->
-                  </div>
-                </div>
-                <div class="blog-card">
-                  <h2>Published Blog</h2>
-                  <div class="blog-card-footer">
-                    <span>
-                      Last Edited 17th December, 2018
+                      Last Edited {{pBlog.updatedAt | formatDate('LLLL')}}
                     </span>
                     <!-- Dropdown with menu here -->
                   </div>
                 </div>
               </div>
               <!-- In case of no drafts blogs  -->
-              <!-- <div class="blog-error">
+              <div v-else class="blog-error">
                 No Drafts :(
-              </div> -->
+              </div>
             </template>
           </div>
         </div>
@@ -86,6 +74,7 @@
 </template>
 <script>
 import Header from '~/components/shared/Header'
+import { mapState } from 'vuex';
 export default {
   layout: 'instructor',
   components: {Header},
@@ -94,6 +83,12 @@ export default {
       activeTab: 0
     }
   },
+  computed: {
+    ...mapState({
+      published : ({instructor}) => instructor.blog.items.published,
+      drafts : ({instructor}) => instructor.blog.items.drafts,
+    })
+  },
   async fetch({store}) {
     await store.dispatch('instructor/blog/fetchUserBlogs')
   }

plugins/filters.js

@@ -1,4 +1,5 @@
-import Vue from "vue"
+import Vue from 'vue'
+import moment from 'moment'
 
 Vue.filter('shortenText',function(text, maxLength = 300){
   if(text && typeof text === 'string'){
@@ -6,4 +7,10 @@ Vue.filter('shortenText',function(text, maxLength = 300){
     return text.substr(0, maxLength) + finalChar
   }
   return ''
+})
+
+Vue.filter('formatDate', function(date, dateFormat = 'LL') {
+  if (!date) return ''
+
+  return moment(date).format(dateFormat)
 })