You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.2 KiB
37 lines
1.2 KiB
<script setup lang="ts">
|
|
const { data, pending, error, refresh } = await useFetch('/api/hello')
|
|
const userCount = computed(() => data.value?.users?.length ?? 0)
|
|
</script>
|
|
|
|
<template>
|
|
<main style="padding: 1rem; font-family: sans-serif">
|
|
<NuxtRouteAnnouncer atomic />
|
|
|
|
<h1>Person Panel</h1>
|
|
|
|
<p v-if="pending">加载中...</p>
|
|
|
|
<div v-else-if="error">
|
|
<p>接口请求失败：{{ error.message }}</p>
|
|
<button type="button" @click="refresh()">重试</button>
|
|
</div>
|
|
|
|
<section v-else>
|
|
<p>hello: {{ data?.hello }}</p>
|
|
<p>users count: {{ userCount }}</p>
|
|
<button type="button" @click="refresh()">刷新数据</button>
|
|
<div v-if="Array.isArray(data?.users)">
|
|
<ul>
|
|
<li v-for="user in data.users" :key="user.id">
|
|
<span v-if="user.name">姓名：{{ user.name }}</span>
|
|
<span v-if="user.email" style="margin-left: 1em;">邮箱：{{ user.email }}</span>
|
|
<span v-if="user.age !== undefined" style="margin-left: 1em;">年龄：{{ user.age }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-else>
|
|
<p>暂无用户信息</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|