Active Tab > 탭, :class v-if 사용법

pages/instructor/blogs/index.vue

@@ -15,12 +15,18 @@
           </div>
           <div class="tabs">
             <ul>
-              <li><a>Drafts</a></li>
-              <li><a>Published</a></li>
+              <!-- set here active tab -->
+              <li @click="activeTab = 0">
+                <a :class="{'is-active': activeTab === 0}">Drafts</a>
+              </li>
+              <!-- set here active tab -->
+              <li @click="activeTab = 1">
+                <a :class="{'is-active': activeTab === 1}">Published</a>
+              </li>
             </ul>
           </div>
           <div class="blogs-container">
-            <template>
+            <template v-if="activeTab === 0">
               <div>
                 <div class="blog-card">
                   <h2>Some Title</h2>
@@ -46,6 +52,32 @@
                 No Drafts :(
               </div> -->
             </template>
+            <template v-if="activeTab === 1">
+              <div>
+                <div class="blog-card">
+                  <h2>Published Blog</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
+                    </span>
+                    <!-- Dropdown with menu here -->
+                  </div>
+                </div>
+              </div>
+              <!-- In case of no drafts blogs  -->
+              <!-- <div class="blog-error">
+                No Drafts :(
+              </div> -->
+            </template>
           </div>
         </div>
       </div>
@@ -57,6 +89,11 @@ import Header from '~/components/shared/Header'
 export default {
   layout: 'instructor',
   components: {Header},
+  data() {
+    return {
+      activeTab: 0
+    }
+  },
   async fetch({store}) {
     await store.dispatch('instructor/blog/fetchUserBlogs')
   }
@@ -64,6 +101,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  .is-active {
+    border-bottom-color: #363636;
+    color: #363636;
+  }
   .blog-error {
     font-size: 35px;
   }