mirror of
https://github.com/r-ca/kidshift-web.git
synced 2024-10-25 16:34:01 +00:00
タスク一覧コンポーネント wip
This commit is contained in:
parent
d243a8c92c
commit
f314467f89
42
src/components/TaskListComponent.vue
Normal file
42
src/components/TaskListComponent.vue
Normal file
|
@ -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>
|
Loading…
Reference in New Issue
Block a user