Nested M2A
How can i display the section.title in this example?
section.id is no problem, but with the title i stuck.
Sorry for this rookie-question
section.id is no problem, but with the title i stuck.
Sorry for this rookie-question
<template>
<p>{{ pages }}</p>
<hr>
<div v-for="page in pages" :key="page.id">
<label>PAGE.ID {{ page.id }} </label>
<h2> {{ page.slug }}</h2>
<div v-for="section in page.sections" :key="section.id">
<label>section.id {{ section.id }} </label>
<p>-- section.title {{ section.title }}</p>
</div>
<hr>
</div>
</template>
<script setup>
const { $directus, $readItems } = useNuxtApp()
const { data: pages } = await useAsyncData('pages', () => {
return $directus.request(
$readItems('pages', {
fields: ['id', 'slug', 'sections.id', 'sections.title']
})
)
})
console.log(pages);
</script><template>
<p>{{ pages }}</p>
<hr>
<div v-for="page in pages" :key="page.id">
<label>PAGE.ID {{ page.id }} </label>
<h2> {{ page.slug }}</h2>
<div v-for="section in page.sections" :key="section.id">
<label>section.id {{ section.id }} </label>
<p>-- section.title {{ section.title }}</p>
</div>
<hr>
</div>
</template>
<script setup>
const { $directus, $readItems } = useNuxtApp()
const { data: pages } = await useAsyncData('pages', () => {
return $directus.request(
$readItems('pages', {
fields: ['id', 'slug', 'sections.id', 'sections.title']
})
)
})
console.log(pages);
</script>
