Question

当我的页面滚动到Load More时，我尝试制作the bottom数据。第一件事是我在数据循环的末尾创建了一个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)被评估为函数，而不是实际的string value

如果您使用babel / webpack

，请尝试此操作

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

或者如果不是

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

页面为底部区域时，使用vue js加载更多数据

1 个答案: