Блог

Это сводит меня с ума, поэтому я надеюсь, что кто-нибудь сможет помочь.

Я создал приложение Nuxt с @nuxt/content и использую Netlify-CMS для создания контента. Кажется, все это работает нормально. Однако я пытаюсь отобразить компонент, содержащий цикл MD-файлов, которые у меня есть, но в файле index.vue ничего из цикла не отображается.

Я знаю (немного) о реквизите и выбросе$, но, поскольку я не запускаю событие, это, похоже, не работает.

Код компонента:

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

И индексируйте.vue-код:

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

Если я помещу свой код компонента как часть index.vue, все будет работать, но я бы хотел избежать этого, и именно поэтому я пытаюсь поместить цикл в компонент.

Как указано в документации Nuxt:

Этот крючок можно разместить только на компонентах страницы.

Это означает asyncData , что работает только с компонентами в pages/ папке.

У вас есть несколько вариантов:

1. Вы используете fetch вместо этого. Это другой асинхронный хук, но он вызывается из любого компонента. Он не будет блокировать рендеринг, как в случае с asyncData таким компонентом, сначала он будет создан с пустыми данными.
2. Вы извлекаете свои данные со страницы asyncData и передаете результат в качестве реквизита своему компоненту

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