mirror of
https://github.com/Elvanos/fantasia-archive.git
synced 2024-10-03 02:26:20 +13:00
53 lines
904 B
Vue
53 lines
904 B
Vue
|
<template>
|
||
|
<div>
|
||
|
<p>{{ title }}</p>
|
||
|
<q-list>
|
||
|
<q-item
|
||
|
v-for="todo in todos"
|
||
|
:key="todo.id"
|
||
|
clickable
|
||
|
@click="increment"
|
||
|
>
|
||
|
{{ todo.id }} - {{ todo.content }}
|
||
|
</q-item>
|
||
|
</q-list>
|
||
|
|
||
|
<p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
|
||
|
<p>Active: {{ active ? 'yes' : 'no' }}</p>
|
||
|
<p>Clicks on todos: {{ clickCount }}</p>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts" setup>
|
||
|
import { computed, ref } from 'vue'
|
||
|
|
||
|
interface Todo {
|
||
|
id: number;
|
||
|
content: string;
|
||
|
}
|
||
|
|
||
|
interface Meta {
|
||
|
totalCount: number;
|
||
|
}
|
||
|
|
||
|
const props = withDefaults(
|
||
|
defineProps<{
|
||
|
title: string;
|
||
|
todos?: Todo[];
|
||
|
meta: Meta;
|
||
|
active?: boolean;
|
||
|
}>(),
|
||
|
{
|
||
|
todos: () => []
|
||
|
}
|
||
|
)
|
||
|
|
||
|
const clickCount = ref(0)
|
||
|
function increment () {
|
||
|
clickCount.value += 1
|
||
|
return clickCount.value
|
||
|
}
|
||
|
|
||
|
const todoCount = computed(() => props.todos.length)
|
||
|
</script>
|