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

171
Visualizações
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 à 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