I'm trying to fetch for each A, B, C category a different folder in my content folder.
The best way I've managed to do that is using v-for
and some arrays list in order to have my category list at the same place.
This array works with slots
that generate a new Item
for each new element:
<div v-for="accordion in accordions" :key="accordion.title" class="l">
<Item>
<template #title>
{{ accordion.title }}
</template>
<template #content>
<div>{{ accordion.text }}</div>
</template>
</Item>
</div>
</div>
I have this to fetch my articles:
async asyncData ({ $content }) {
const articles = await $content('', { deep: true })
.only(['title', 'description', 'img', 'slug', 'cat'])
.sortBy('createdAt', 'asc')
.fetch()
return { articles }
}, // this fetch all of my articles, which is nice
Now, in the accordions, I would like to do something similar to this:
(or find a way to pass a .where({ cat: 'A' })
...)
accordions: [
{
title: 'A',
text: const products = await this.$content('text').where({ 'articles.cat': { $contains: 'A' } }).fetch()
},
{
title: 'B',
text: const products = await this.$content('text').where({ 'articles.cat': { $contains: 'B' } }).fetch()
},
{
title: 'C',
text: const products = await this.$content('text').where({ 'articles.cat': { $contains: 'C' } }).fetch()
}
],
How can I manage to instead of hardcoded text, have my articles from my content folder?
This gives a nice result (with some random .md
files but the same structure as yours).
<template>
<pre>{{ articles }}</pre>
</template>
<script>
export default {
async asyncData ({ $content }) {
const articles = await $content('', { deep: true })
.only(['title', 'description', 'img', 'slug'])
.sortBy('createdAt', 'asc')
.fetch()
return { articles }
}
}
</script>
Official source: https://github.com/nuxt/content/issues/750#issuecomment-774495039
The result displayed being