Estoy usando una compilación de WordPress sin cabeza con Nuxt. La compilación de WordPress contiene muchos componentes "flexibles" que tienen un atributo llamado "acf_fc_layout" que determinará el nombre del componente.
La forma en que funciona mi ciclo es básicamente recorrer la REST Api y, por ejemplo, si "acf_fc_layout" es igual a "article_block", representar "ArticleBlock.vue" como un componente. De esta manera, nuestro cliente puede agregar y quitar componentes a su antojo.
El problema es que estoy tratando de ejecutar un bucle for para representar estos componentes, pero cuando ejecuto el siguiente código, me dicen que "acf_fc_layout no está definido".
Aunque, SI agrego un nodo HTML principal y lo recorro (por ejemplo, ), funciona bien.
El problema es que no quiero un nodo HTML principal para cada componente. Solo quiero renderizar solo el componente.
¿Dónde me estoy equivocando con esto?
Código:
<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>Intenta envolver tu <template v-for="..."> dentro de una plantilla:
<template> <template v-for="..." :key="..."> ... </template> </template La <template> actuará como un nodo principal, pero no se representará