Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

222
Visualizações
¿Cómo devolver un componente/etiqueta de componente dinámicamente en vue/nuxt?

Estoy intentando convertir una aplicación next.js ( https://medium.com/strapi/how-to-create-pages-on-the-fly-with-dynamic-zone-8eebe64a2e1 ) en una aplicación nuxt.js. En esta aplicación puedo obtener datos de una API y la aplicación next.js usa los datos de las API para generar nuevas páginas con su contenido correspondiente. Funciona bien en Next.js.

Los datos/contenido de la API consisten en datos de SEO para la página, algunos valores estáticos y bloques muy importantes. Estos bloques tienen un atributo llamado __component donde se guarda el nombre de los componentes y también tienen los datos de los componentes como imágenes, texto, etc. Así que solo tengo que lidiar con next.js cuando agrego nuevos componentes.

En next.js usé catch-all-route ./pages/[[...slug]] .js para capturar cualquier slug que un usuario pueda ingresar. Luego, la API se activa con el slug de context.query y obtengo los datos de las páginas, si existen. Ahora los datos json de las API solo deben pasarse al componente blockmanager.

 const Universals = ({blocks}) => { return <div><BlockManager blocks={blocks}></BlockManager></div>; };

Aquí, el administrador de bloques obtiene la lista json de bloques, a partir de la cual analizar los componentes.

 import Hero from '../../blocks/Hero'; import Pricing from '../../blocks/Pricing'; const getBlockComponent = ({__component, ...rest}, index) => { let Block; switch (__component) { case 'blocks.hero': Block = Hero; break; case "blocks.prices": Block = Pricing; break; } return Block ? <Block key={`index-${index}`} {...rest}/> : null; }; const BlockManager = ({ blocks }) => { return <div> {blocks.map(getBlockComponent)} </div>; }; BlockManager.defaultProps = { blocks: [], }; export default BlockManager;

¿Cómo puedo replicar esta línea ahora en nuxt js?

 return Block ? <Block key={`index-${index}`} {...rest}/> : null;

¿Cómo devolver un componente/etiqueta de componente dinámicamente en vue/nuxt? ¿Existe tal vez otra solución para insertar automáticamente el componente deseado? Tal vez alguien sepa cómo convertir la lógica de los administradores de bloques a la lógica vue/nuxt por completo.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Creo que estás buscando el atributo is . Puedes leer sobre esto aquí .

Su plantilla se vería así:

 <component :is="__component" key={`index-${index}`} />
about 4 years ago · Juan Pablo Isaza Relatório

0

Bien, creo que lo tengo. No hay cosas extrañas en realidad. Lo pensé demasiado complicado. Quería todo creado dinámicamente pero no es necesario como vi más tarde ...

 <template v-if="blocks"> <div id="example-1"> <div v-for="({__component, ...rest}=block, i) in blocks" :key="i"> <Hero :data="rest" v-if="__component === 'blocks.hero'"/> <Pricing :data="rest" v-if="__component === 'blocks.pricing'"/> </div> </div> </template> <script> import Hero from '../../blocks/Hero/Hero.vue'; import Pricing from '../../blocks/Pricing/Pricing.vue'; export default { components: { Hero, Pricing }, props: { blocks: Array } } </script>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda