Почему я не могу получить доступ к useAsyncData в теге настройки скрипта Nuxt 3 для оператора if?

Я использую Prismic API для получения некоторых данных, которые хочу показать в своем шаблоне Nuxt3.
Все работает нормально, просто хочу показать страницу 404 при отсутствии данных вместо ошибки 500. Я добавил проверку, если данные пусты:

<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>

Проблема в том, что в части if (!werk.uid) werk.uid ВСЕГДА пуст. Поэтому я всегда получаю эту ошибку 404. В моем шаблоне werk.uid не пуст, поэтому я предполагаю, что есть проблема, когда оператор if не может получить доступ к переменной const с помощью useAsyncData?

Есть идеи? Официальные документы рекомендуют это так же, как и я: https://v3.nuxtjs.org/getting-started/error-handling/#example-1

Совсем не уверен, но может попробовать этот async () => await client.getByUID("werk", name)?

kissu 08.11.2022 16:23

Я пробовал это, и это ничего не могло получить. Может быть, Prismic нужен useAsyncData? v3.prismic.nuxtjs.org/guides/basics/fetching-content

Lisa 08.11.2022 16:30

Не уверен, открыты ли ее личные сообщения, но, возможно, пришлите ей что-нибудь: twitter.com/li_hbr

kissu 08.11.2022 16:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
424
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кто-то на призмическом форуме помог мне найти решение. Это специфическая проблема Vue 3:

Вам нужно будет использовать .value после работы: (!werk.value). Вместо просто (werk.anything)

Другие вопросы по теме