Estoy bajo el supuesto de que v-show mostrará/ocultará elementos en función de los datos pasados.
Por alguna razón, mi elemento no se ocultará dinámicamente cuando v-show sea falso. Cuando cambio manualmente la variable (showNav) a falso, se ocultará al cargar la página, por lo que parece funcionar correctamente.
Mi variable (showNav) depende del desplazamiento. Cuando se desplaza hacia arriba, se establece en verdadero, cuando se desplaza hacia abajo, se establece en falso. Me gustaría que mi barra de navegación se ocultara al desplazarme hacia abajo, pero eso no sucede.
El comportamiento de desplazamiento se está comportando correctamente. Ambos están cambiando correctamente mi variable v-show (showNav) a verdadero o falso, pero el elemento permanece visible en todo momento.
plantilla html
<template> <div id="home-page"> <Navbar id="navbar" v-show="showNav" :class="{change_background: scrollPosition > 50}" /> </div> </template>JS
mounted() { window.addEventListener('scroll', function(){ // detects new state and compares it with the old one if ((document.body.getBoundingClientRect()).top > this.scrollPos) { this.showNav = true; console.log(this.showNav); } else { this.showNav = false; console.log(this.showNav); } // saves the new position for iteration. this.scrollPos = (document.body.getBoundingClientRect()).top; }) }, data() { return { scrollPosition: null, scrollPos: 0, showNav: true, } },Debe manejar los eventos de scroll vinculando uno de los métodos definidos dentro del bloque de methods al evento de desplazamiento de la ventana. En su caso, la función de callback de llamada pasada a la escucha del evento de scroll no tendrá acceso a la vue instance y, por lo tanto, no actualizará las propiedades reactivas de vuejs . Vea el ejemplo de trabajo a continuación.
new Vue({ el: "#app", data() { return { scrollPosition: null, scrollPos: 0, showNav: true, } }, mounted() { window.addEventListener('scroll', this.handleScroll); }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); // To avoid memory leakage }, methods: { handleScroll(event) { // detects new state and compares it with the old one if ((document.body.getBoundingClientRect()).top > this.scrollPos) { this.showNav = true; console.log(this.showNav); } else { this.showNav = false; console.log(this.showNav); } // saves the new position for iteration. this.scrollPos = (document.body.getBoundingClientRect()).top; } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" style="min-height: 1000px;"> <span v-show="showNav">You are trying to hide me</span> </div>