Markus Posts - Answer Overflow

Markus

•Created by Markus on 7/22/2024 in #❓・help

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>

6 replies

Gaming

Programming