Vue elements not hiding with v-show

Question

Im under the assumption that v-show will show/hide elements based on its passed data.

For some reason, my element will not hide dynamically when v-show is false. When I manually change the variable (showNav) to false, it will be hidden on page load so it seems to functioning properly.

My variable (showNav) depends on scroll. When scroll up, it is set to true, when scroll down it is set to false. I'd like my nav bar to hide on scroll down but that is not happening.

The scroll behavior is behaving properly. Both are properly changing my v-show variable (showNav) to either true or false but the element remains visible at all times.

HTML 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,
            }
        },

user_16046521 · Answer

You need to handle the scroll events by binding one of the methods defined within the methods block to the scroll event of the window. In your case the callback function passed to the scroll event listen will not have access to the vue instance and hence it will not update the reactive properties of vuejs. See the working sample below.

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;
    }
  }
});



  You are trying to hide me

Vue elements not hiding with v-show

1 Answers