I am using a headless WordPress build with Nuxt. The WordPress build contains many "flexible" components which have an attribute called "acf_fc_layout" which will determine the name of the component.
The way my loop works is basically, loop through the REST Api, and for example, if "acf_fc_layout" is equal to "article_block", render "ArticleBlock.vue" as a component. This way, our client can add and remove components as they please.
The problem is, I am trying to run a for loop to render out these components, but when I run the below code, I am told "acf_fc_layout is undefined".
Although, IF I add a parent HTML node, and loop through that (for example, ), it works fine.
Problem is, I do not want a parent HTML node for each component. I want to JUST render the component only.
Where am I going wrong with this?
Code:
<template v-for="(section, index) in sections" :key="`section-${index}`">
<!-- eslint-disable vue/no-v-html -->
<MediaAndText
v-if="section.acf_fc_layout === 'image_text'"
:section="section"
/>
<FullSizeImage
v-else-if="section.acf_fc_layout === 'full_size_media'"
:section="section"
/>
<GoogleMap
v-else-if="section.acf_fc_layout === 'google_map'"
:section="section"
/>
<StatsBlock
v-else-if="section.acf_fc_layout === 'stats_block'"
:section="section"
/>
<!--eslint-enable-->
</template>
<script>
import FullSizeImage from './sections/FullSizeImage.vue'
import StatsBlock from './sections/StatsBlock.vue'
import MediaAndText from '~/components/sections/MediaAndText.vue'
import GoogleMap from '~/components/sections/GoogleMap.vue'
export default {
name: 'SectionSelector',
components: {
MediaAndText,
FullSizeImage,
GoogleMap,
StatsBlock
},
props: {
sections: {
default: () => {},
type: Array
}
},
}
</script>
Try to wrap your <template v-for="..."> within a template:
<template>
<template v-for="..." :key="...">
...
</template>
</template
The <template> will act as a parent node, but will not be rendered