Why can't I access useAsyncData for an if statement in a Nuxt 3 script settings tag?
P粉105971514
2023-08-26 09:47:58
<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>
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)