title: Load more data using vue js when page is bottom area
body: <p>I tried to make my <code>Load More</code> data when my page scroll to <code>the bottom</code>. The first thing is I make a div element that I put at the end of the data loop.</p>
  
  <pre><code>&lt;div class="products"&gt;
      &lt;p&gt;{{ status }}&lt;/p&gt;
      &lt;div class="product" v-for="(item, index) in items"&gt;
          &lt;div&gt;
              &lt;div class="product-image"&gt;&lt;img :src="item.link" alt=""&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h4 class="product-title"&gt;{{ item.title }}&lt;/h4&gt;
              &lt;p&gt;Price : {{ price }}&lt;/p&gt;
              &lt;button class="add-to-cart btn" @click="addItem(index)"&gt;Add Item To Cart&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="product-list-bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Div element with id <code>product-list-bottom</code> I will detect it using <a href="https://github.com/stutrek/scrollMonitor" rel="nofollow noreferrer">scrollMonitor.js</a></p>
  
  <p>My default data :</p>
  
  <pre><code>data: {
      status: 'Empty product',
      total: 0,
      items: [],
      cart: [],
      newSearch: 'anime',
      lastSearch: '',
      price: STATIC_PRICE,
      result: []
  }
  </code></pre>
  
  <p>Inside <code>mounted</code> I detected scroll to bottom :</p>
  
  <pre><code>mounted: function() {
      this.onSubmit()
  
      var vueInstance = this
      var elem = document.getElementById('product-list-bottom')
      var watcher = scrollMonitor.create(elem)
      watcher.enterViewport(function() {
          vueInstance.appendItems()
      })
  }
  </code></pre>
  
  <p>Inside <code>mounted</code> I call <code>onSubmit</code> :</p>
  
  <pre><code>onSubmit: function() {
      this.items = ''
      this.status = "Searching keyword '" + this.newSearch + "' on server ..." 
  
      this.$http.get('/search/'.concat(this.newSearch))
      .then(function(response) {
          this.lastSearch = this.newSearch,
          this.status = 'Find ' + response.data.length + ' data'
          this.result = response.data
          this.appendItems()
      })
  }
  </code></pre>
  
  <p>And inside <code>onSubmit</code> I call <code>appendItems</code> function :</p>
  
  <pre><code>appendItems: function() {
      if(this.items.length &lt; this.result.length) {
  
          var start = this.items.length
          var end = parseInt(this.items.length + 5)
  
          var append = this.result.slice(start, end)
  
          this.items = this.items.concat(append)
  
          console.log(append)
      }
  }
  </code></pre>
  
  <p>All goes well, but when I scroll down I get an error message :
  <a href="https://i.stack.imgur.com/hpZdw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hpZdw.png" alt="error display"></a></p>
  
  <p>This is because this line :</p>
  
  <pre><code>this.items = this.items.concat(append)
  </code></pre>
  
  <p>How do I make the data on xxx change (always added five new data from the array) according to the command on the line :</p>
  
  <pre><code>var end = parseInt(this.items.length + 5)
  </code></pre>
  
  <p>Thanks</p>