Emitの利用

aocm · Feb 27, 2021 · d31abf4 · d31abf4
1 parent 20d247e
commit d31abf4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/front/src/components/molecules/TaskItem.vue b/front/src/components/molecules/TaskItem.vue
@@ -12,8 +12,8 @@
 
     <q-item-section top side>
     <div class="text-grey-8 q-gutter-xs">
-      <q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
-      <q-btn size="12px" flat dense round icon="more_vert" />
+      <q-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="emitDeleteButton" />
+      <q-btn size="12px" flat dense round icon="more_vert" @click="emitDetailButton" />
     </div>
     </q-item-section>
   </q-item>
@@ -33,6 +33,14 @@ export default {
     return {
       text: ''
     }
+  },
+  methods: {
+    emitDeleteButton () {
+      this.$emit('delete-emit', this.title)
+    },
+    emitDetailButton () {
+      this.$emit('detail-emit', this.title)
+    }
   }
 }
 </script>
diff --git a/front/src/components/organisms/TaskList.vue b/front/src/components/organisms/TaskList.vue
@@ -3,8 +3,13 @@
     <q-list bordered class="rounded-borders">
       <q-item-label header>Tasks</q-item-label>
       <template v-for="(taskItem, index) in taskList">
-        <q-separator :key="index" spaced />
-        <task-item :key="index" :title="taskItem.title" />
+        <q-separator :key="`${index}+separator`" spaced />
+        <task-item
+          :key="index"
+          :title="taskItem.title"
+          @delete-emit="deleteButton"
+          @detail-emit="detailButton"
+        />
       </template>
     </q-list>
     <q-footer bordered class="bg-white text-primary">
@@ -34,6 +39,22 @@ export default {
       type: Array,
       default: null
     }
+  },
+  data () {
+    return {
+      text: ''
+    }
+  },
+  methods: {
+    deleteButton (val) {
+      console.log(val)
+    },
+    detailButton (val) {
+      console.log(val)
+    },
+    inputEnter () {
+
+    }
   }
 }
 </script>
diff --git a/front/src/layouts/TasksLayout.vue b/front/src/layouts/TasksLayout.vue
@@ -32,10 +32,6 @@ export default {
   name: 'TaskLayout',
   components: { TaskList, MenuList },
   props: {
-    title: {
-      type: String,
-      required: true
-    },
     menuList: {
       type: Array,
       default: null