0

我已经使用nuxt.js/content建立了一个投资组合项目

我试图只在一页上显示所有需要的内容。

这是我显示内容的方式：

     <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