类别内的laravel vue产品

Question

如何使用laravel后端和vue前端在每个类别中显示5种产品的分页？

<!-- this generates the categories -->
<template v-for="category in categories" v-if="category.MENUID === menu.MENUID">
<div class="categoryName">
<span class="float-left">
    <button class="btn btn-link btn-block text-left bh" type="button" data-toggle="collapse" :href="'#'+category.CATNAME" role="button" :data-target="'#'+category.CATNAME" aria-expanded="false" :aria-controls="'collapseOne-'+category.UID" @click.once.prevent="getProductsOf(category.CATID)">
<i class="fas fa-caret-down"></i> {{category.CATNAME}}
    </button>
</span>

    <!-- this generates 5 products and pagination for all products in the category -->
    <template v-for="product in catProducts.data" v-if="product.CATID === category.CATID">
        <div class="productName">{{product.PRODNAME}}</div>
    </template>
</template>

laravel部分工作正常，但是Vue每次必须为一个类别生成时都会为所有类别生成新的分页。

getProductsOf(catid) {
            this.$Progress.start();
            axios.get('/api/getproducts/'+this.compid+'/'+catid)
                .then((data) => {
                    this.catProducts = data.data.products;
                })
                .catch(() => {

                });
            this.$Progress.finish();
        },

，这是发送到Laravel来获取数据的axios。接收到的数据正确，但是分页按钮不起作用，并且每次我打开新类别时，所有类别分页都将替换为我单击的新类别。