parent component is not getting data from child in Nuxt app

Question

This is driving me crazy so I hope that anyone can help.

I made a Nuxt app with @nuxt/content and I'm using Netlify-CMS to create content. That all seems to work fine. However I'm trying to display a component that contains a loop of the MD-files that I have, but in the index.vue nothing of the loop is displayed.

I know (a little) about props and $emit, but as I am not triggering an event this dosen't seem to work.

Component code:

<template>
  <section>
    <h1>Releases</h1>
    <li v-for="release of rfhreleases" :key="release.slug">
      <h2>{{ release.artist }}</h2>
    </li>
  </section>
</template>

<script>
export default {
  components: {},
  async asyncData({ $content, params }) {
    const rfhreleases = await $content('releases', params.slug)
      .only(['artist'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      rfhreleases,
    }
  },
}
</script>

And index.vue code:

<template>
  <div>
    <Hero />
    <Releases />
    <About />
    <Contact />
  </div>
</template>

<script>
export default {
  head() {
    return {
      script: [
        { src: 'https://identity.netlify.com/v1/netlify-identity-widget.js' },
      ],
    }
  },
}
</script>

If I place my component code as part of index.vue, everything work, but I would love to avoid that and thats why I'm trying to place the loop in a component.

score 0 · Answer 1 · answered Jul 23 '21 at 05:44

As stated on the Nuxt documentation:

This hook can only be placed on page components.

That means asyncData only works on components under pages/ folder.

You have several options:

You use fetch instead. It's the other asynchronous hook but it's called from any component. It won't block the rendering as with asyncData so the component it will instanciated with empty data first.
You fetch your data from the page with asyncData and you pass the result as a prop to your component

<template>
  <div>
    <Hero />
    <Releases :releases="rfhreleases" />
    <About />
    <Contact />
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const rfhreleases = await $content('releases', params.slug)
      .only(['artist'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      rfhreleases,
    }
  },
}
</script>

parent component is not getting data from child in Nuxt app

1 Answers1