mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
790 B
Vue
38 lines
790 B
Vue
2 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<p>{{ title }}</p>
|
||
|
|
<ul>
|
||
|
|
<li v-for="todo in todos" :key="todo.id" @click="increment">
|
||
|
|
{{ todo.id }} - {{ todo.content }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
|
||
|
|
<p>Active: {{ active ? 'yes' : 'no' }}</p>
|
||
|
|
<p>Clicks on todos: {{ clickCount }}</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, ref } from 'vue';
|
||
|
|
import { Todo, Meta } from './models';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
title: string;
|
||
|
|
todos?: Todo[];
|
||
|
|
meta: Meta;
|
||
|
|
active: boolean;
|
||
|
|
}
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
todos: () => [],
|
||
|
|
});
|
||
|
|
|
||
|
|
const clickCount = ref(0);
|
||
|
|
function increment() {
|
||
|
|
clickCount.value += 1;
|
||
|
|
return clickCount.value;
|
||
|
|
}
|
||
|
|
|
||
|
|
const todoCount = computed(() => props.todos.length);
|
||
|
|
|
||
|
|
</script>
|