vue js data value return undefined inside method

Question

I am trying to access data value reviews into scroll method . Consoled reviews by console.log(this.reviews). but it always returns undifined;

data() {
  return {
    m: '',
    rating: '',
    review: '',
    visibility: '',
    reviews: [],
    page: 1,
  };
},



scroll (page) { 
  $('#profile-edits-more').on("scroll", function() {      
    if(jQuery(this).scrollTop() + jQuery(this).innerHeight() >= this.scrollHeight) { 
      var vm = this;
      axios.post('./fetch-reviews?page='+page, {
        m: vm.m,
      })
      .then(response => {
        page +=1; 
        console.log(this.reviews);
      });       
    }
  });
},

gleam · Accepted Answer · 2019-02-18 14:00:15Z

1

Wrong this try:

scroll (page) { 
  var vm = this;
  $('#profile-edits-more').on("scroll", function() {      
    if(jQuery(this).scrollTop() + jQuery(this).innerHeight() >= this.scrollHeight) { 
      axios.post('./fetch-reviews?page='+page, {
        m: vm.m,
      })
      .then(response => {
        vm.page += 1; 
        console.log(vm.reviews);
      });
    }
  });
},

UPD:

$('#profile-edits-more').on("scroll", ===> function() <=== {

Expression function() ... creates a new scope (with new this). You can also use arrow-methods for such things:

scroll(page) { 
  let $el = $('#profile-edits-more');
  $el.on('scroll', () => {
    if ($el.scrollTop() + $el.innerHeight() >= $el.scrollHeight) { 
      axios.post('./fetch-reviews?page='+page, {
        m: this.m,
      })
      .then(response => {
        this.page += 1; 
        console.log(this.reviews);
      });
    }
  });
},

edited Feb 18, 2019 at 14:00

answered Feb 18, 2019 at 12:52

gleam

8706 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue js data value return undefined inside method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related