Question

我是Laravel和Vuejs的新手。我有一个问题，当单击“加载更多”按钮或向下滚动到底部时，整个组件将重新呈现。按钮或滚动条的作用就像分页一样，但是您所要做的就是加载更多或添加更多显示。我的问题是如何在不重新渲染整个组件的情况下渲染新的显示。

我尝试创建一个变量，该变量将传递要显示的分页数。是的，它可以工作，但是组件正在重新渲染，并且服务器回复的大小越来越大。

这是我在Vue组件上的脚本：

<script>
export default {
    props: ['user','review_count'],
    data(){
        return{
            reviews: {},
            limit: 2,
            scrolledToBottom: false,
        }
    },
    created(){
        this.getReviews();
        this.scroll();
    },
    methods: {
        getReviews: function(page){
            axios.get('/datas/reviews?user='+ this.user + '&limit='+ this.limit)
            .then((response) =>{
                this.reviews = response.data.data;
            })
            .catch(()=>{
            });
        },
        countType: function(data, type) {
            return data.filter(function(value) { return value.type === type }).length;
        },
        loadMore: function(){
            this.limit+=6;
            this.getReviews();
        },
        scroll () {
            window.onscroll = () => {
                let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
                if (bottomOfWindow&&this.review_count>this.limit) {
                    this.loadMore();
                }
            }
        }
    }
}
</script>

这是我的控制器：

public function reviews()
    {
        if($users = \Request::get('user')){
            if($limit = \Request::get('limit')){
        $reviews = Review::select(\DB::raw('id, product_id, review_rating, review_content'))
                        ->where('user_id', $users)
                        ->with('products:product_image,id,product_name')
                        ->with('activities')
                        ->orderBy('reviews.created_at', 'DESC')
                        ->paginate($limit);}}
        return $reviews;
    }

Answer 1

我认为您需要做两件事。

1 /而不是增加限制传送时间，您应该考虑在服务器上分页结果，以便可以从服务器询问下一页。现在，在每个连续的调用中，您都在获取已经拥有的内容，这将消除您降低服务器负担的目标

2 /显然，在客户端代码中，您还需要支持分页，但是还要确保在循环元素上正确设置密钥。 VueJS使用该键来确定是否应在循环中重新呈现该特定元素。

让我知道这是否有帮助！

Answer 2

我刚刚解决了自己的问题，解决方案是使用分页。每当服务器向下滚动时，我就将来自服务器的所有数据推送到一个对象中。

这是我的向下滚动代码：

scroll () {
            window.onscroll = () => {
                let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
                if (bottomOfWindow&&this.review_count>this.reviews.length) {
                this.getReviews();
                }
            }
        }

这是我的getReviews（）代码：

getReviews: function(){
            let vm = this;
            axios.get('/datas/reviews?user='+ this.user + '&page='+ this.page)
            .then((response) =>{
                $.each(response.data.data, function(key, value) {
                                vm.reviews.push(value);
                                console.log((vm.reviews));
                        });
            })
            .catch(()=>{
            });
            this.page+=1;
        },

我想出了这个主意，以便不再使用分页查看下一篇文章。它更像是一个无限滚动分页组件。

如何在不重新渲染VueJS的整个组件的情况下添加显示

2 个答案: