首页 > 解决方案 > 未使用 nuxt 和 storyblok 呈现数据

问题描述

嘿。我正在使用 nuxt 创建一个网站,并使用 Storyblok 作为 CMS。我已经做了 2 页,通过它传递数据并且工作正常。现在我有一个(我正在创建一个唱片页面)数据在那里(当我控制台时)但没有呈现任何东西......

所以我尝试在 asyncData 中控制数据并显示出来。我尝试添加我以前使用过的其他组件,它工作得很好..

这是我的组件

<article :to="id" class="discography">
    <div :style="{backgroundImage: 'url(' + thumbnailImage + ')'}" class="discography-thumbnail"></div>
    <div class="title">
      <h1 class="test">{{ title }}</h1>
      <p>{{ year }}</p>
    </div>
  </article>
...
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    year: {
      type: String,
      required: true
    },
    image: {
      type: String,
      required: true
    },
    id: {
      type: String,
      required: true
    }
  }
}

以及它呈现的页面:

<section class="container">
    <Discography
      v-for="discography in discographies"
      :key="discography.id"
      :title="discography.title"
      :releaseYear="discography.year"
      :thumbnailImage="discography.image"
      :id="discography.id"
    />
  </section>
...
then(res => {
        console.log(res)

        return {
          discography: res.data.stories.map(ds => {
            return {
              id: ds.slug,
              title: ds.content.title,
              year: ds.content.year,
              image: ds.content.image
            }
          })
        }

标签: javascriptvue.jsnuxt.jsstoryblok

解决方案


推荐阅读