0

nuxt.js/contentを使用してポートフォリオ プロジェクトをセットアップしました

必要なすべてのコンテンツを 1 ページだけに表示しようとしています。

コンテンツを表示する方法は次のとおりです。

     <li v-for="portfolioItem of portfolio" :key="portfolioItem.slug">
        <nuxt-link @click.native="setCurrentPortfolioItem(portfolioItem)" :to="`#${portfolioItem.slug}`">

          <p class="title">{{ portfolioItem.title }}</p>
      

        </nuxt-link>
      </li>
     
   <div v-if="currentPortfolioItem" :id="currentPortfolioItem.slug">{{ currentPortfolioItem.body }}</div >
   

データの保存場所、設定方法currentPortfolioItem、データの取得方法は次のとおりです。

  data() {
    return {
      currentPortfolioItem: {}
    }
  },

  // Fetch all data from Portfolio directory
  async asyncData({$content, params}) {
    const portfolio = await $content('portfolio')
      .only(['title', 'description', 'body'])
      .fetch()

    return {
      portfolio
    }
  },


  methods: {
    // Set my current portfolio item
    setCurrentPortfolioItem(portfolioItem){

        this.currentPortfolioItem = portfolioItem;

    }

  },

今私の考えでは、そのnuxt-linkボタンを押すと、その下に div が開き、.md ファイルの内部が表示されます。

私が直面している問題は、nuxt/content ドキュメントから .md ファイルの本文を表示する方法を読み取る唯一の方法は、これを使用することです。

 <nuxt-content :document="page" />

しかし、これを使用すると、何らかの理由で、どこに表示してもデータが表示されません。要素が機能するのは別の_slug.vueファイルだけです

/content API を介して送信されるオブジェクトを調べてみました。Body オブジェクトを取得しましたが、.md ファイルで使用されているものに応じて変化する要素の小さな配列に分割されています。そのようです:

body: Object
 children: Array(15)
  0: {__ob__: Observer}
  1:
   type: "text"
   value: "\n"

したがって、ここから続行する方法がわかりません。おそらく、誰かがこれを行う方法を知っているか、アイデアを持っていますか?

4

0 に答える 0