Directus и Nuxt: правильный вывод элементов на фронтенде

Вопрос или проблема

<template>
    {{ playgrounds }}
</template>

<script setup lang="ts">
const { getItems } = useDirectusItems();

interface Playground {
    id: number;
    name: string;
}

const playgrounds = await getItems<Playground>({
    collection: "playgrounds"
});
</script>

const playgrounds = await getItems<Playground>({
    collection: "playgrounds"
});

Ответ или решение

Вопрос, с которым вы столкнулись, отражает несколько важных аспектов работы с Directus и Nuxt. Давайте разберем это подробнее, чтобы помочь вам правильно вывести элементы на фронтенд и избежать ошибок, таких как 404.

1. Проверка конфигурации Directus

Первое, на что стоит обратить внимание, — это конфигурация вашей системы Directus. Ошибка 404 указывает на то, что ресурс не был найден. Убедитесь, что:

• Коллекция playgrounds действительно существует в вашем проекте Directus.
• Имя коллекции написано правильно — проверьте регистр символов (например, playgrounds, а не Playgrounds).
• У вас есть необходимые права на доступ к этой коллекции.

Вы можете проверить доступные коллекции, используя API Directus, например, по URL-адресу http://YOUR_DIRECTUS_URL/items.

2. Правильное использование асинхронного кода в Nuxt

Вы используете await вне контекста async функции. В Nuxt 3, с использованием <script setup>, это можно сделать следующим образом:

<template>
    <div v-if="playgrounds">
        <ul>
            <li v-for="playground in playgrounds" :key="playground.id">
                {{ playground.name }}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useDirectusItems } from 'your-directus-module-path'; // убедитесь, что путь правильный

const { getItems } = useDirectusItems();
const playgrounds = ref<Playground[]>([]);

const fetchPlaygrounds = async () => {
    playgrounds.value = await getItems<Playground>({
        collection: "playgrounds"
    });
};

fetchPlaygrounds();
</script>

3. Обработка ошибок

Также рекомендуется добавить обработку ошибок в ваш запрос. Это поможет вам выяснить, почему может возникать ошибка 404:

const fetchPlaygrounds = async () => {
    try {
        playgrounds.value = await getItems<Playground>({
            collection: "playgrounds"
        });
    } catch (error) {
        console.error("Ошибка при получении парковых зон:", error);
    }
};

4. Проверка консоли

Также проверьте консоль разработчика в вашем браузере на наличие каких-либо ошибок сети (Network). Это может помочь вам диагностировать проблему, например, отсутствующие заголовки, неправильные запросы или другие проблемы.

5. Прочие рекомендации

• Убедитесь, что ваш проект Nuxt и сервер Directus находятся в одной сети и могут взаимодействовать друг с другом.
• Если вы используете CORS, проверьте, правильно ли настроены разрешения CORS на сервере Directus.

Заключение

Если вы следовали всем шагам и все еще сталкиваетесь с проблемами, вероятно, стоит проверить документацию Directus по работе с API или обратиться на форумы поддержки, чтобы получить обратную связь от сообщества. Работа с API может быть сложной, и маленькие нюансы могут влиять на конечный результат. Успехов в разработке!