mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-15 10:24:50 +00:00
34 lines
1.0 KiB
Vue
34 lines
1.0 KiB
Vue
<script setup>
|
|
const ctr = ref(0)
|
|
const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch(`/api/hello/${ctr.value}`), { watch: [ctr] })
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtExampleLayout example="use-async-data" show-tips>
|
|
<div>{{ data }}</div>
|
|
<div>
|
|
<NButton :disabled="pending" @click="refresh">
|
|
Refresh Data
|
|
</NButton>
|
|
<NButton :disabled="pending" @click="ctr++">
|
|
+
|
|
</NButton>
|
|
</div>
|
|
<template #tips>
|
|
<div>
|
|
<p>
|
|
This example shows how to use <code>useAsyncData</code> to fetch data from an API endpoint.
|
|
</p>
|
|
<p>
|
|
Nuxt will automatically read files in the
|
|
<a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
|
|
<code>~/server/api</code> directory
|
|
</a>
|
|
to create API endpoints. Learn more about
|
|
<a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</NuxtExampleLayout>
|
|
</template>
|