component dropown 만들기> 속성주입 export, import 사용법

components/shared/Dropdown.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="dropdown" :class="{'is-active': isActive}">
+    <div class="dropdown-trigger">
+      <div
+        @click="isActive = !isActive"
+        aria-haspopup="true"
+        aria-controls="dropdown-menu">
+        <span></span>
+        <span class="icon is-small">
+          <i class="fas fa-angle-down" aria-hidden="true"></i>
+        </span>
+      </div>
+    </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)"
+           class="dropdown-item">
+          {{item.name}}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  methods: {
+    emitOption(optionIndex) {
+      this.$emit('optionChanged', this.items[optionIndex])
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .dropdown-trigger {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  i {
+    font-size: 25px;
+    align-self: end;
+  }
+</style>

pages/instructor/blogs/index.vue

@@ -37,6 +37,7 @@
                     <span>
                       Last Edited {{dBlog.updatedAt | formatDate('LLLL')}}
                     </span>
+                    <dropdown :items="draftsOptions" />
                     <!-- Dropdown with menu here -->
                   </div>
                 </div>
@@ -57,6 +58,7 @@
                     <span>
                       Last Edited {{pBlog.updatedAt | formatDate('LLLL')}}
                     </span>
+                    <dropdown :items="publishedOptions" />
                     <!-- Dropdown with menu here -->
                   </div>
                 </div>
@@ -74,10 +76,12 @@
 </template>
 <script>
 import Header from '~/components/shared/Header'
+import Dropdown from '~/components/shared/Dropdown'
+import { createPublishedOptions, createDraftsOptions } from '~/pages/instructor/options'
 import { mapState } from 'vuex';
 export default {
   layout: 'instructor',
-  components: {Header},
+  components: {Header, Dropdown},
   data() {
     return {
       activeTab: 0
@@ -87,8 +91,15 @@ export default {
     ...mapState({
       published : ({instructor}) => instructor.blog.items.published,
       drafts : ({instructor}) => instructor.blog.items.drafts,
-    })
+    }),
+    publishedOptions() {
+      return createPublishedOptions()
+    },
+    draftsOptions() {
+      return createDraftsOptions()
+    }
   },
+  
   async fetch({store}) {
     await store.dispatch('instructor/blog/fetchUserBlogs')
   }

pages/instructor/options.js

@@ -0,0 +1,21 @@
+// Commands
+const commands = {
+  'DELETE_BLOG': 'DELETE_BLOG',
+  'EDIT_BLOG': 'EDIT_BLOG',
+}
+
+const createOption = (name, command) => ({name, command})
+
+// Options
+// Published Blogs
+const DELETE_BLOG = createOption('Delete Blog', commands.DELETE_BLOG)
+const EDIT_BLOG = createOption('Edit Blog', commands.EDIT_BLOG)
+
+// Options
+// Drafts Blogs
+const DELETE_DRAFT = createOption('Delete Draft', commands.DELETE_BLOG)
+const EDIT_DRAFT = createOption('Edit Draft', commands.EDIT_BLOG)
+
+
+export const createPublishedOptions = () => [EDIT_BLOG, DELETE_BLOG]
+export const createDraftsOptions = () => [EDIT_DRAFT, DELETE_DRAFT]