method gets called right away not on scroll

[packytagliaferro]

Basically what is happeneing is the method gets called on page load and then never again. I have my script like so:

<ul class="styled-list"  v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">

      <li class="list-head">
        <div>Name</div>
        <div>Month</div>
        <div>Year</div>
      </li>

      <li class="list-body" v-for="account in accounts">
        <div>@{{ account.name }}</div>
        <div v-bind:class="account.month_class" >@{{ account.month_diff }}%</div>
        <div v-bind:class="account.year_class" >@{{ account.year_diff }}%</div>
      </li>

    </ul>

<script src="https://unpkg.com/vue-infinite-scroll@2.0.0"></script>

  <script type="text/javascript">

      var vm = new Vue({
          el: '.table-wrap',
          data: {
              accounts: [],
              moreAccounts: [],
              busy: false,
              data: []
          },
          mounted:  function() {

            var dist = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);

            this.$http.get( '/api/accountsByDistributor?dist='+dist+'&order=desc&order_by=current_year&limit=10' ).then(function (response){

                vm.accounts = response.body;

            }, function (response){
                  console.log(response);
            });

            this.$http.get( '/api/accountsByDistributor?dist='+dist+'&order=desc&order_by=current_year&limit=-1' ).then(function (response){

                vm.moreAccounts = response.body;

            }, function (response){
                  console.log(response);
            });

          },
          methods: {
            loadMore: function() {

              this.busy = true;

              console.log(this.moreAccounts.length);

              if(this.moreAccounts.length > 0)
              {
                setTimeout(function () 
                {
                    var temp = [];
                    for (var i = this.moreAccounts.length; i <= this.moreAccounts.length + 10; i++) {
                        temp.push( this.moreAccounts[i] );
                    }

                    this.accounts = this.accounts.concat(temp);

                }.bind(this), 1000);
              }

            }
          }
      });

  </script>

Not sure if its due to some css thing (I have see overflow: auto; messing things up but I dont have this set on any containers. )

[ollieBaker]

You are describing the default behaviour

infinite-scroll-immediate-check Boolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container.

use infinite-scroll-immediate-check=false on your component to disable the check.

You also never set this.busy = false; which is why your callback never runs again.

[ghost]

@ollieBaker what exactly do you mean by "check immediately after bind"?

Do you mean:

a) check the scroll distance immediately after bind, and if it's not at the bottom, do nothing.

or

b) Ignore the scroll distance and immediately trigger the handler function after binding .

[ollieBaker]

@raniesantos I was quoting the documentation (a year ago):

"Boolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container." from https://github.com/ElemeFE/vue-infinite-scroll

I believe the answer is 'a'.