Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

170
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!