Load more data using vue js when page is bottom area

Question

I tried to make my Load More data when my page scroll to the bottom . The first thing is I make a div element that I put at the end of the 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 To Cart</button>
        </div>
    </div>
    <div id="product-list-bottom"></div>
</div>

Div element with id product-list-bottom I will detect it using scrollMonitor.js

My default data :

data: {
    status: 'Empty product',
    total: 0,
    items: [],
    cart: [],
    newSearch: 'anime',
    lastSearch: '',
    price: STATIC_PRICE,
    result: []
}

Inside mounted I detected scroll to bottom :

mounted: function() {
    this.onSubmit()

    var vueInstance = this
    var elem = document.getElementById('product-list-bottom')
    var watcher = scrollMonitor.create(elem)
    watcher.enterViewport(function() {
        vueInstance.appendItems()
    })
}

Inside mounted I 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 I 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, but when I scroll down I get an error message :

This is because this line :

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

How do I make the data on xxx change (always added five new data from the array) according to the command on the line :

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

Thanks

Answer 1

it seems '/search/'.concat(this.newSearch) gets evaluated into function and not an actual string value

Try this if you are using babel/webpack

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

Or if not

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

Answer 2

I think since Vue 2.3+ or so you can get this done without any jQuery stuff or any other dependencies:

<style>
.scrollbar{
    overflow-y: scroll;
    //...
}
.styled-scrollbar::-webkit-scrollbar
.styled-scrollbar::-webkit-scrollbar-thumb
.styled-scrollbar::-webkit-scrollbar-track{
    //styling
}
</style>
<template>
//...
<div @scroll="scroll" class="scrollbar">
    <div v-for="item in items" :key="item.id">
        //TODO: item content
    </div
</div>
//...
</template>
<script>
{
    data: {
        //..
        lastScrollUpdate:0
    }
    //..
    mounted: {
        scroll:function (e) {
            var scrollBar=e.target;
            if((scrollBar.scrollTop + scrollBar.clientHeight >= scrollBar.scrollHeight-20)){
                var t=new Date().getTime();
                if((t-this.lastScrollUpdate)>3000){
                    this.lastScrollUpdate=t;
                    console.log('reached end: '+scrollBar.scrollTop+' '+scrollBar.clientHeight+' '+scrollBar.scrollHeight);
                    //TODO: load more data
                }else{
                    console.log("< 3sec between scoll. no update");
                }
            }
        },
        //..
    }
}
</script>

You may also want to adjust this to "@scroll.passive", in order to let the scroll-function be executed parallel to the UI ( https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers )