From f314467f890a0c13222fb5fba380c797fbf689e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=8D=E3=82=80=E3=81=AD=E3=81=93?= <nem@nem.x0.to>
Date: Thu, 18 Jul 2024 15:14:48 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=82=B9=E3=82=AF=E4=B8=80=E8=A6=A7?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=20wip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TaskListComponent.vue | 42 ++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/TaskListComponent.vue

diff --git a/src/components/TaskListComponent.vue b/src/components/TaskListComponent.vue
new file mode 100644
index 0000000..2d68898
--- /dev/null
+++ b/src/components/TaskListComponent.vue
@@ -0,0 +1,42 @@
+<template>
+  <q-list bordered>
+    <q-item v-for="task in tasks" :key="task.id" class="q-py-sm q-px-md">
+      <q-item-section>
+        <q-item-label>{{ task.name }}</q-item-label>
+        <q-item-label caption>{{ task.price }}円</q-item-label>
+      </q-item-section>
+      <q-item-section side>
+        <q-btn @click="completeTask(task)" label="完了" color="primary" rounded/>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const tasks = ref([
+  { id: 1, name: '風呂掃除', price: 100 },
+  { id: 2, name: '玄関掃除', price: 100 },
+  { id: 3, name: 'ゴミ出し', price: 100 },
+  // 他のタスクも追加できます
+]);
+
+const completeTask = (task) => {
+  // 完了ボタンが押されたときの処理をここに記述します
+  console.log(`${task.name}が完了しました`);
+};
+</script>
+
+<style scoped>
+.q-btn {
+  background-color: #3b5998;
+  color: #fff;
+}
+.q-item-section {
+  align-items: center;
+}
+.q-list {
+  background: #f5f5f5;
+}
+</style>