javascript - 如何在 VueJS 中添加显示而不重新渲染整个组件

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>

这是我的 Controller :

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

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

这是我的向下滚动代码:

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;
        },

我想出了这个想法，这样我就不会再使用分页来查看下一篇文章了。它更像是一个无限滚动分页组件。