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.