Why can't I access useAsyncData for an if statement in a Nuxt 3 script settings tag?
P粉105971514
P粉105971514 2023-08-26 09:47:58
0
1
528
<p>I'm using the Prismic API to get some data that I want to display in a Nuxt3 template. </p><p> Everything works fine, I just want to show a 404 page when there is no data, not a 500 error. I added a check to see if the data is empty: </p> <pre class="brush:html;toolbar:false;"><script setup> const route = useRoute() const name = route.params.werke; const { client } = usePrismic() const { data: werk } = await useAsyncData('werk', () => client.getByUID("werk", name)) if (!werk.uid) { throw createError({ statusCode: 404, statusMessage: 'Page Not Found' }) } </script> </pre> <p>The problem is that in the <code>if (!werk.uid)</code> section werk.uid is always empty. So I always get a 404 error. In my template, werk.uid is not empty, so I think there is a problem, the if statement cannot access the const variable using useAsyncData? </p> <p>Any ideas? The official documentation recommended me in a similar way: https://v3.nuxtjs.org/getting-started/error-handling/#example-1</p>
P粉105971514
P粉105971514

reply all(1)
P粉752479467

Someone in the Prism forum helped me find a solution. This is a Vue 3 specific issue:

You need to use .value after werk: (!werk.value). Not just (werk.anything)

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template