javascript - 当页面位于底部区域时使用 vue js 加载更多数据

Question

当我的页面滚动到底部时，我尝试让我的加载更多数据。第一件事是创建一个 div 元素，并将其放在数据循环的末尾。

<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>

带有 id product-list-bottom 的 Div 元素我将使用 scrollMonitor.js 检测它

我的默认数据:

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

在mounted内部我检测到滚动到底部:

mounted: function() {
    this.onSubmit()

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

在mounted内部我调用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()
    })
}

在 onSubmit 中我调用 appendItems 函数:

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

一切顺利，但是当我向下滚动时，我收到一条错误消息:

这是因为这一行:

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

如何根据线上的命令使 xxx 上的数据发生变化(总是从数组中添加五个新数据):

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

谢谢

Answer 1

似乎 '/search/'.concat(this.newSearch) 被评估为函数，而不是实际的字符串值

如果您使用 babel/webpack，请尝试此操作

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

或者如果没有

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