Nuxt/examples/use-async-data/components/CounterExample.vue
Anthony Fu 8dd77d7b6e
feat: refreshNuxtData function and app:data:refresh hook (#3929)
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
2022-03-28 19:12:41 +02:00

20 lines
443 B
Vue

<script setup>
const ctr = ref(0)
const { data, pending, refresh } = await useAsyncData('/api/hello', () => $fetch(`/api/hello/${ctr.value}`), { watch: [ctr] })
</script>
<template>
<div>
{{ data }}
<div class="flex justify-center gap-2">
<NButton :disabled="pending" @click="ctr++">
+
</NButton>
<NButton :disabled="pending" @click="refresh">
</NButton>
</div>
</div>
</template>