[Vuejs]-Console log message fires despite of the condition statement – Vue2

by

0👍

✅

I had to disable onscroll listener on destroy:

destroyed () {
  window.onscroll = null
}

So when i visit the main or contact page, that listener won’t be attached.

Also i had to move onscroll listener from mounted to created, because when it was in mounted () it was firing twice:

created () {
  window.onscroll = () => {
    let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight > document.documentElement.offsetHeight - 1
    if (bottomOfWindow) {
      this.isActive = true
      this.fetchNumbers('infinite', counter++ * this.limit)
    }
  }
}
👤Alexander Kim

0👍

fetchNumbers is most definetly called twice.
Try log every context as type.

fetchNumbers (type = 'default', offset = 0, limit = 0) {
   return axios.get(globalConfig.NUMBERS_URL)
     .then((resp) => {
       if (type === 'infinite') {
         console.log(type,'infinite fired');    //this will always print 'infinite', 'inifinite fired'
       } else {
         console.log(type,'default fired');     //this will print the caller's name and 'default fired'
         type = 'default';                      //after logging reset type to 'default' to continue the execution
       }
     })
}

async created () {
  await this.fetchNumbers('created');
}

showCats (bool) {
  this.showCategories = bool

   if (!bool) {
     this.category = [1];
   } else {
     this.category = [];
   }
   this.isActive = true
   this.fetchNumbers('showCats');
}

Either created or showCats is being fired for some reason at the same time as window.onscroll. The randomly changing order suggests a race condition between the two methods.

UPDATE

This should work, provided you nested the desired page in a div with id=”number_page_div_id” (you may probably have to adjust that elements height and position):

created () {
  let element = getElementById('numbers_page_div_id');
  element.onscroll = () => {        
    let bottomOfWindow = element.scrollTop + window.innerHeight > element.offsetHeight - 1;
    if (bottomOfWindow) {
      this.fetchNumbers('infinite')
    }
  }
}
👤devtech

-1👍

you may approach separate condition instead of if/else e.g. 

.then((resp) => {
       if (type === 'infinite') {
         console.log('infinite fired')
       }
       if (type === 'default '){
         console.log('default fired')
       }
    })
👤Monirul Islam

Leave a comment