I'm still a bit confused on what I'm doing wrong here. Essentially I have a vue component in which I want to load some data in async after element is mounted.
I'm using NUXT 3 and composition API.
<script setup>
let directories = useState('directories', () => null);
onMounted( async () => {
const { data: response } = await useAsyncData('directories', () => $fetch('/api/s3-get-directories'));
directories.value = response;
});
</script>
It seems like onMounted triggers before render and is not receiving data correctly. If I wrap on mounted into setTimeout and give 100ms delay it works fine.
I would appreciate an example of how I should load in data without blocking after client is ready. Or any explanation on what I'm doing wrong here.
I was missing { server: false }
in options
await useLazyAsyncData('directories', () => $fetch('/api/s3-get-directories'), { server: false });
This makes it only run in front-end and not back-end.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.