javascript - Load more data using vue js when page is bottom area -

i tried make load more data when page scroll the bottom. first thing make div element put @ end of data loop.

<div class="products">     <p>{{ status }}</p>     <div class="product" v-for="(item, index) in items">         <div>             <div class="product-image"><img :src="item.link" alt=""></div>         </div>         <div>             <h4 class="product-title">{{ item.title }}</h4>             <p>price : {{ price }}</p>             <button class="add-to-cart btn" @click="additem(index)">add item cart</button>         </div>     </div>     <div id="product-list-bottom"></div> </div> 

div element id product-list-bottom detect using scrollmonitor.js

my default data :

data: {     status: 'empty product',     total: 0,     items: [],     cart: [],     newsearch: 'anime',     lastsearch: '',     price: static_price,     result: [] } 

inside mounted detected scroll bottom :

mounted: function() {     this.onsubmit()      var vueinstance =     var elem = document.getelementbyid('product-list-bottom')     var watcher = scrollmonitor.create(elem)     watcher.enterviewport(function() {         vueinstance.appenditems()     }) } 

inside mounted call onsubmit :

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

and inside onsubmit call appenditems function :

appenditems: function() {     if(this.items.length < 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)     } } 

all goes well, when scroll down error message :

this because line :

this.items = this.items.concat(append) 

how make data on xxx change (always added 5 new data array) according command on line :

var end = parseint(this.items.length + 5) 

thanks

it seems '/search/'.concat(this.newsearch) gets evaluated function , not actual string value

try if using babel/webpack

this.$http.get(`/search/`${this.newsearch}`) 

or if not

this.$http.get('/search/' + this.newsearch)