gidaban79
121
1
Vue

Vue and Paginate

Posted 3 months ago by gidaban79

Hello guys, i am trying to make a paginate in my reviews system,

<script>
    var companyId = 1;
    export default {
        name: "Reviews",
        data() {
            return {
                reviews: [],
                login: false,
                review: {
                    id: '',
                    first_name: '',
                    last_name: '',
                    title: '',
                    rate: '',
                    photo: '',
                    body: '',
                    created_at: '',
                    company_id: '',
                },
                review_id: '',
                pagination: {},
            }
        },
        created() {
            this.fetchReviews();
            this.randomNumber();
        },
        methods:{
            fetchReviews(page_url) {
                let vm = this;
                page_url = page_url || '/review/'+companyId+'/';
                    fetch(page_url)
                        .then(res => res.json()
                        )
                        .then(res => {
                            this.reviews = res.data;
                            vm.makePagination(res);
                        })
                        .catch(err => console.log(err)
                        );

            },
            makePagination(meta) {
                let pagination = {
                    current_page: meta.current_page,
                    last_page: meta.last_page,
                    next_page_url: meta.next_page_url,
                    prev_page_url: meta.prev_page_url,

                }
                this.pagination = pagination;
            },
            randomNumber: function () {
                this.random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
            }
        }
    }
</script>

for paginate i am using

                        <!--Paginate-->
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-center">
                                <li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item"><a
                                        @click="fetchComments(pagination.prev_page_url)" class="page-link" href="#">Previous</a></li>
                                <li class="page-item disabled"><a href="#" class="page-link text-dark">Page {{ pagination.current_page}}
                                    of {{ pagination.last_page}}</a></li>
                                <li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item"><a
                                        @click="fetchComments(pagination.next_page_url)" class="page-link" href="#">Next</a></li>
                            </ul>
                        </nav>
                        <!--Paginate-->

when i am click on next page in console i see it:

 Property or method "fetchComments" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.