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"
したがって、ここから続行する方法がわかりません。おそらく、誰かがこれを行う方法を知っているか、アイデアを持っていますか?