Nuxt•4mo ago

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 😦

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

5 Replies

Reinier Kaper•4mo ago

That should work as far as I can tell, what does the console.log give you? Can you show an example of a page object?

MarkusOP•4mo ago

The console.log only include the IDs 😦 { "v_isShallow": false, "dep": {}, "v_isRef": true, "_rawValue": [ { "id": 1, "slug": "Startseite", "sections": [ { "id": 10 }, { "id": 1 }, { "id": 2 }, { "id": 3 }, { "id": 4 }, { "id": 5 }, { "id": 6 }, { "id": 7 }, { "id": 8 }, { "id": 9 } ] }, { "id": 2, "slug": "Pressespiegel", "sections": [] } ], "_value": [ { "id": 1, "slug": "Startseite", "sections": [ { "id": 10 }, { "id": 1 }, { "id": 2 }, { "id": 3 }, { "id": 4 }, { "id": 5 }, { "id": 6 }, { "id": 7 }, { "id": 8 }, { "id": 9 } ] }, { "id": 2, "slug": "Pressespiegel", "sections": [] } ] }

MarkusOP•4mo ago

Reinier Kaper•4mo ago

And you're sure title actually exists in the data? I.e. if you remove the fields, does it work?

MarkusOP•4mo ago

Thank you @Reinier Kaper I've missed to read all the necessary items 😦 Now it works...

Gaming

Programming

Nested M2A