Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

167
Vistas
Clase div de representación condicional en carga cuando está en una página específica en VUE3

Soy nuevo en Vue y tengo un problema con la representación condicional de una clase administrada por un componente secundario y una página

Cuando cargo una página, tengo dos secciones, un componente (barra de navegación) y la página (en mi caso, Inicio). Al agregar o no una clase específica, me gustaría que la barra de navegación sea transparente, solo cuando se carga en la página de inicio.

Así que escribí esta parte en la plantilla de la barra de navegación:

 <navbar class="normalclass" :class={transparent:istransparent}>Something</navbar>

JS:

 export default { name: 'Navbar', data() { return { istransparent:false, // By default is false } } }

En las vistas Home.vue, en cambio, inserté este código:

 import { ref } from 'vue' export default { name: 'Home', setup () { const istransparent = ref(true) return { istransparent } }} // I also tried to insert just this code but it doesn't change the result. setup () { return { istransparent:true } }

En App.vue tengo esta parte de la plantilla que gestiona el renderizado de la aplicación

 <Navbar /> <router-view /> <Footer />

No entendí exactamente dónde me equivoqué y cuál sería la mejor solución para hacer lo que necesito.

Pido ayuda a los que tienen más experiencia que yo.

########## EDITAR #########

Ok, resolví el problema con un enfoque diferente.

En lugar de usar una variable que se va a leer en componentes individuales (o en este caso, vista), como home.vue

Usé vue-router para averiguar en qué página estaba. Entonces, dado que solo quiero el encabezado transparente en el hogar, en el componente Navbar.vue agregué este código para decir que si estoy en el hogar, la variable es verdadera, así que agrego las clases que necesito. Aquí el código utilizado:

En navbar.vue:

 <navbar class="normalclass" :class= {transparent:isHome}>Something</navbar>

JS:

 export default { name: 'Navbar', computed: { isHome() { return this.$route.name == 'Home' // Check if router name is 'Home' } } } }

No sé si ese es el mejor enfoque, pero funciona y se siente estable, con muy poco código. Lo comparto con ustedes por el bien del conocimiento.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda