0

Compañeros, estoy intentando crear una vista con varios componentes.

Esta es la vista (Home.vue):

<template>

    <app-carrusel></app-carrusel>

    <app-informacion></app-informacion>

</template>

<script>

    import CarruselIndex from '../components/CarruselIndex.vue';

    import ComparacionInformacionValtec from '../components/ComparacionInformacionValtec.vue';

    export default {

        name: 'Principal',
        components: {

            'app-carrusel': CarruselIndex,
            'app-informacion': ComparacionInformacionValtec

        },
        data: () => ({

            menuLateral: false,

        }),

    }

</script>

Este es el CarruselIndex:

<template>

<v-carousel height="100vh" cycle hide-delimiters show-arrows-on-hover>

  <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>

</v-carousel>
import bannerCiencia from '../assets/imagenes/carrusel/banner_ciencia.png'; import bannerProductividad from '../assets/imagenes/carrusel/banner_productividad.png'; import bannerTecnologia from '../assets/imagenes/carrusel/banner_tecnologia.png'; export default { name: 'CarruselIndex', data: () => ({ slide: 1, sliding: null, items: [ { src: bannerCiencia, }, { src: bannerProductividad, }, { src: bannerTecnologia, }, ], }), };
<template>

    <v-container style="width: 100%; background: rgb(89,181,72); background: linear-gradient(180deg, rgba(89,181,72,1) 0%, rgba(35,130,118,1) 100%);" fluid>

        <v-layout wrap>
            
            <v-flex xs12 md6>
                
                <h2>¿QUÉ ES VALTEC?</h2>

                <p>La plataforma de Valoración de Tecnologías, ValTec, es un aplicativo que ayuda a conocer el estado de maduración de una tecnología. Iniciando desde la idea, hasta llegar al mercado, generando de esta forma innovación. Basado en la guía de TRL, creada por la NASA. Ayuda a los usuarios a conocer el estado real en el que se encuentra su Resultado de Investigación. De esta manera podrá conocer las fases posteriores de investigación, identificando aspectos regulatorios relacionados al Resultado de Investigación, la producción intelectual vinculada a este y el nivel inventivo del Resultado de Investigación.</p>

                <p>Se espera que, con el aplicativo, se puedan clasificar los resultados de investigación obtenidos en el marco de la estrategia SENNOVA, generando la información pertinente, como base para la generación de innovación.</p>

                <p>ValTec nació como el resultado de un modelo propuesto por el grupo investigación Tecnología y Productividad, liderado por Carlos Alberto Malagón Sánchez y Lady Johanna Malagón Sánchez.</p>

            </v-flex>
            
            <v-flex xs12 md6>
                
                <div class="embed-responsive embed-responsive-16by9">

                    <iframe width="90%" height="300" src="https://www.youtube-nocookie.com/embed/sEtpzPFgvkY?controls=0&rel=0&modestbranding=1" class="rounded-lg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                </div>

            </v-flex>

        </v-layout>

    </v-container>

</template>

<script>

    export default {

        name: 'ComparacionInformacionValtec',

    };

</script>

Y me arroja este error:

introducir la descripción de la imagen aquí

¿Cómo hago para importar varios componentes para la misma vista?

1 respuesta 1

1

Intenta de esta forma a ver que sale. El error que tienes de compilación es que dentro de la etiqueta <template> tienes que poner un <div> En el que una mas de una etiqueta de lo contrario te dará error de compilación. Code:

<template>
  <div>
    <app-carusel></app-carousel>
    <app-incormacion></app-informacion>
  </div>
</template>

<script>
  import CarruselIndex from '../components/CarruselIndex'
  import ComparacionInformacionValtec from '../components/ComparacionInformacionValtec'

  export default {
    name: "Principal",

    components: {
      'app-carusel': CarruselIndex,
      'app-incormacion': ComparacionInformacionValtec
    },

    data() {
      return {
        menuLateral: false
      };
    },
  }
</script>
8
  • No. El error sigue siendo exactamente el mismo.
    – Saco04
    el 18 sep. 2020 a las 22:31
  • Mira las otras vistas. Mira la actualización del texto para que veas porque es ese error. el 18 sep. 2020 a las 22:32
  • Es el mismo que está en la imagen. No cambió nada. Lo único que cambió es que el error ahora se ve en <app-informacion></app-informacion>, pero fuera de eso, es lo mismo.
    – Saco04
    el 18 sep. 2020 a las 22:33
  • Edita tu pregunta y muestra esa vista. el 18 sep. 2020 a las 22:34
  • Ya lo edité, junto con tu sugerencia
    – Saco04
    el 18 sep. 2020 a las 22:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.