javascript - Pagination based on external Data API - Vue.js

Question

I have Created a child component and trying to use those values in the parent-component(index.vue). What I am trying to do is, based on the API values such as current_page, lastpageurl and etc to make the pagination work in the parent component

modal-component.vue as Child-component

    <template>
        <div>
            <ul class="pagination">
                <li class="pagination-item">
                    <button class="pagination-button" type="button" @click="onClickFirstpage" :disabled="isInFirstPage">
                        1
                    </button>
                </li>
    
                <li class="pagination-item">
                    <button class="pagination-button" type="button" @click="onClickPreviousPage" :disabled="isInFirstPage">
                        &lt;
                    </button>
                </li>
    
                <li v-for="page in pages" :key="page.name" class="pagination-item">
                    <button class="pagination-button" type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled" :class="{ active: isPageActive(page.name) }"> {{ page.name }} </button>
                </li>
    
                <li class="pagination-item">
                    <button class="pagination-button" type="button" @click="onClickNextPage" :disabled="isInLastPage">
                        &gt;
                    </button>
                </li>
    
                <li class="pagination-item">
                    <button class="pagination-button" type="button" @click="onClickLastPage" :disabled="isInLastPage">
                        Last
                    </button>
                </li>
            </ul>
        </div>
    </template>
    
    <script>
    export default {
        name: "modal-pagination",
        components: {},
        data() {
            return {
            };
        },
        methods: {
    
            onClickFirstPage() {
                this.$emit('pagechanged', 2);
            },
            onClickPreviousPage() {
                this.$emit('pagechanged', this.currentPage - 1);
            },
            onClickPage(page) {
                this.$emit('pagechanged', page);
            },
            onClickNextPage() {
                this.$emit('pagechanged', this.currentPage + 1);
            },
            onClickLastPage() {
                this.$emit('pagechanged', this.totalPages);
            },
            isPageActive(page) {
                return this.currentPage === page;
            }
        },
        computed: {
    
            startPage() {
                //when on first-page
                if(this.currentPage === 1) {
                    return 1;
                }
                //when on the last page
                if (this.currentPage === this.totalPages) {
                    return this.totalPages - this.maxVisibleButtons;
                }
                return this.currentPage - 1;
            },
            pages() {
                const range =[];
    
                for(let i = this.startPage; i <= Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages); i+=1) {
                    range.push({
                        name: 1,
                        isDisabled: i === this.currentPage
                    });
                }
    
                return range;
            },
            isInFirstPage() {
                return this.currentPage === 1;
            },
            isInLastPage() {
                return this.currentPage === this.totalPages;
            },
            
        },
        props: { }
    };
    </script>
    
    <style lang="scss" scoped>
    .pagination-row {
        border: 1px solid rgba(0, 0, 0, 0.1);
        height: 50px;
        padding: 5px;
        background-color: white;
    }
    
    .pagination-button {
        margin: 2px;
        padding: 5px 15px;
        border: none;
        font-size: 1rem;
        outline: none;
        background: transparent;
        font-family: "trim-medium";
    }
    
    .pagination {
        border: 1px solid rgba(0, 0, 0, 0.1);
        height: 50px;
        padding: 5px;
        background-color: white;
        list-style-type: none;
    }
    
    .pagination-item {
        display: inline-block;
    }
    
    .active {
        background-color: #015CB8;
    }

</style>

index.vue as parent component

<template>
<div>
     <modalPagination v-on:pageChanged="updatePage($event)"></modalPagination>
</div>
</template>
<script>
import modalImage from './modal-image.vue';
import modalInfo from './modal-info.vue';
import modalPagination from './modal-pagination';

export default {
    name: "digital-asset-management",
    components: {
        modalImage,
        modalInfo,
        modalPagination
    },
    data() {
        return {
         ....
        };
    },
    props: {
       //declared props here and trying to use them in child component
        maxVisibleButtons: {
            type: Number,
            required: false,
            default: 3
        },
        totalPages: {
            type: Number,
            required: true
        },
        total: {
            type: Number,
            required: true
        },
        currentPage: {
            type: Number,
            required: true
        }
    },
    mounted() {
        ...
        // loads the response
        this.load()
    },
    methods: {
        async load() {
            this.loading = true;
            let response = await axios.get(`/` + window.culture + `/dam/api/load?dir=` + this.directoryValue + `&search=` + this.search + `&page=` + this.currentPage);

            if (response.data.errorStatusCode && response.data.errorStatusCode == 400) {
                console.log('error occurred.');
            } else {
                ...
            }
        },

       //declared the method here
        pageChaged(currentPage) {
            this.currentPage = currentPage;
            console.log('This is ' + this.currentPage)
            this.load();
        },

...
</script>

API that sends the page values

images: {current_page: 1, data: [{id: 11, image_url: "https://assets.,…},…],…}

current_page: 1

data: [{id: 11, image_url: "ranger45.jpg",…},…]

first_page_url: "https://web.myweb.com/en-au/dam/api/load?page=1"

from: 1

last_page: 3

last_page_url: "https://web.myweb.com/en-au/dam/api/load?page=3"

next_page_url: "https://web.myweb.com/en-au/dam/api/load?page=2"

path: "https://web.myweb.com/en-au/dam/api/load"

per_page: 5

prev_page_url: null

to: 5

total: 13

Answer 1

等待大神答复