Dropdown 제어>click.prevent, emit, export, $router, $event

components/shared/Dropdown.vue

@@ -13,8 +13,9 @@
     </div>
     <div class="dropdown-menu" id="dropdown-menu" role="menu">
       <div class="dropdown-content">
-        <a v-for="(item, index) in items" :key="item.name"
-           @click.prevent="emitOption(index)"
+        <!-- <a v-for="(item, index) in items" :key="item.name" -->
+        <a v-for="(item) in items" :key="item.name"
+           @click.prevent="emitOption(item.command)"
            class="dropdown-item">
           {{item.name}}
         </a>
@@ -36,8 +37,11 @@ export default {
     }
   },
   methods: {
-    emitOption(optionIndex) {
-      this.$emit('optionChanged', this.items[optionIndex])
+    // emitOption(optionIndex) {
+    //   this.$emit('optionChanged', this.items[optionIndex])
+    // }
+    emitOption(command) {
+      this.$emit('optionChanged', command)
     }
   }
 }

pages/instructor/blogs/index.vue

@@ -37,7 +37,9 @@
                     <span>
                       Last Edited {{dBlog.updatedAt | formatDate('LLLL')}}
                     </span>
-                    <dropdown :items="draftsOptions" />
+                    <dropdown 
+                      @optionChanged="handleOption($event, dBlog._id)"
+                      :items="draftsOptions" />
                     <!-- Dropdown with menu here -->
                   </div>
                 </div>
@@ -58,7 +60,9 @@
                     <span>
                       Last Edited {{pBlog.updatedAt | formatDate('LLLL')}}
                     </span>
-                    <dropdown :items="publishedOptions" />
+                    <dropdown 
+                      @optionChanged="handleOption($event, dBlog._id)"
+                      :items="publishedOptions" />
                     <!-- Dropdown with menu here -->
                   </div>
                 </div>
@@ -77,7 +81,9 @@
 <script>
 import Header from '~/components/shared/Header'
 import Dropdown from '~/components/shared/Dropdown'
-import { createPublishedOptions, createDraftsOptions } from '~/pages/instructor/options'
+import {  createPublishedOptions, 
+          createDraftsOptions,
+          commands } from '~/pages/instructor/options'
 import { mapState } from 'vuex';
 export default {
   layout: 'instructor',
@@ -99,7 +105,18 @@ export default {
       return createDraftsOptions()
     }
   },
-  
+  methods: {
+    handleOption(command, blogId) {
+      // console.log(blogId)
+      debugger
+      if (command === commands.EDIT_BLOG) {
+        this.$router.push(`/instructor/blog/${blogId}/edit`)
+      }
+      if (command === commands.DELETE_BLOG) {
+        alert('Deleting Blog')
+      }
+    }
+  },
   async fetch({store}) {
     await store.dispatch('instructor/blog/fetchUserBlogs')
   }

pages/instructor/options.js

@@ -1,5 +1,5 @@
 // Commands
-const commands = {
+export const commands = {
   'DELETE_BLOG': 'DELETE_BLOG',
   'EDIT_BLOG': 'EDIT_BLOG',
 }