The click-handler method in VueJS Paginate Component fails to activate

I'm currently working on a Vue Component code that involves pagination for a list. The pagination seems to be working fine, except for the issue I encounter when trying to navigate to the next page, which in this case is page 2. I've added a console log statement and noticed that the method isn't being triggered at all.

Here's my code snippet, can you spot any errors in it?

<ul class="movements-list framed half-bottom-space">
                <li class="list-head">
                    <p>Test</p>
                    <p>Test2</p>
                    <p>Test3<small>Test4</small></p>
                </li>
                <li v-for="item in getItems">
                    <p>{{item}}</p>
                    <p>{{item}}</p>
                    <p class="minus">{{item}} <small>{{item}}</small></p>
                </li>

            </ul>
            <paginate :page-count="getPageCount"
                      :page-range="3"
                      :margin-pages="2"
                      :click-handler="clickCallback"
                      :prev-text="'<'"
                      :next-text="'>'"
                      :container-class="'pagination'"
                      :page-class="'page-item'">
            </paginate>


<script>
    export default {
        name: "cenas-component",
        data: () => ({
            items: ["Saab", "Volvo", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW"],
            parPage: 5,
            currentPage: 1
        }),
        methods: {
            clickCallback: function (pageNum) {
                console.log('im here in clickCallback')
                console.log(pageNum)
                this.currentPage = Number(pageNum);
            },

        },
        computed: {
            getItems: function () {
                let current = this.currentPage * this.parPage;
                let start = current - this.parPage;
                return this.items.slice(start, current);
            },
            getPageCount: function () {
                console.log('getPageCount')
                return Math.ceil(this.items.length / this.parPage);
            }
        }
    }

</script>

When attempting to click on the next pagination number, nothing happens and the page remains stuck on page 1 without any change. Despite adding a Console.log to the clickCallback method, the log doesn't show up.

Can anyone identify a problem within the code? Thank you!

Answer №1

/* script to add items to a checklist using text input */
Vue.component('paginate', VuejsPaginate)

Vue.component('test', {
  data: () => ({
            items: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            parPage: 5,
            currentPage: 1
        }),
        methods: {
            clickCallback: function (pageNum) {
                this.currentPage = Number(pageNum);
            },

        },
        computed: {
            getItems: function () {
                let current = this.currentPage * this.parPage;
                let start = current - this.parPage;
                return this.items.slice(start, current);
            },
            getPageCount: function () {
                return Math.ceil(this.items.length / this.parPage);
            }
        }
  ,
  template: `
    <div>
    <ul>
                <li v-for="item in getItems">
                    <p class="minus">{{item}} <small>{{item}}</small></p>
                </li>

            </ul>
            <paginate :page-count="getPageCount"
                      :page-range="3"
                      :margin-pages="2"
                      :click-handler="clickCallback"
                      :prev-text="'<'"
                      :next-text="'>'"
                      :container-class="'pagination'"
                      :page-class="'page-item'">
            </paginate>
            
    </div>
  `,
  });
let vm = new Vue({
  el: '#app'
})
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Vue ToDo List</title>
    <link href="main-styles.css" rel="stylesheet" type="text/css" />
  <link href="svg-styles.css" rel="stylesheet" type="text/css" />
  <link href="component-styles.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans|Lato" rel="stylesheet">
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginate/2.1.0/index.js"></script>
  <div id="app">
    <test></test>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

I have personally tested the functionality and it worked seamlessly. Apologies for the lack of styling. Feel free to try running the code snippet yourself.

Answer №2

Would you be able to provide the code for the paginate feature? I believe one of the main issues is that when sending the clickCallback from the template, there is no identifier representing the pageNum that should be included as a parameter.

Answer №3

I must admit, my previous approach was quite flawed.

Everything seemed to be functioning smoothly until I encountered issues with certain scripts crashing and preventing the execution of the pagination component due to its reliance on Javascript.

After Mohammed tested my code successfully, it prompted me to reconsider the console errors that appeared insignificant in other instances but proved crucial in this scenario.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mixing various templates into a single outlet in ember.js

I have been working on an ember application that allows users to create, edit, and delete users, as well as view a list of all users. The app was created by following a tutorial on Ember (as I am still learning), but I am facing an issue. Currently, all th ...

Why do query values disappear when refreshing a page in Next.js? [Illustrative example provided]

In my current project, I am developing a simple Next Js application consisting of just two pages. index.tsx: import React from "react"; import Link from "next/link"; export default function Index() { return ( <di ...

Is it possible to host multiple React applications on a single port? Currently experiencing issues with running both an Admin panel and the Front side in production mode on the same Node.js API server

Is it possible to host multiple React applications on the same port? I am experiencing issues with running both an Admin panel and a Front side React app in production mode on the same Node.js API server. ...

Unable to retrieve the store's vuex state

Below is the main file path /main.js import Vue from 'vue'; import App from './App.vue'; import vuetify from './plugins/vuetify'; import router from './router'; import store from './store/index.js'; Vue.c ...

Tips for implementing focusout on multiple elements while avoiding it when switching focus between them

Looking to create a searchable input that displays a dropdown of possible values on focusin, populated by server-side language. Attempted using focusin on elements not involved with the following code: $("body").not($(".dropdownSearch") ...

JSON failing to show all values sent as a string

In a div element there is a table with 3 rows, a textarea, and a button. The JSON data populates the first 3 rows correctly but the textarea remains blank. My goal is to display the previous record from the database in the textarea. function ChangeLoadin ...

What is the best way to make a div pull its background image directly from the internet instead of using the cached version?

Running relevant Javascript every fifteen minutes to fetch the appropriate image from the internet: document.getElementById('weatherbug').style.background = "url('http://tinyurl.com/jwltx5s') repeat scroll -1px -24px transparent"; The ...

Exploring the world of JSON manipulation in JavaScript

I've been experimenting with JSON recently and came across something I don't quite understand. Here is an example of some code I used: var str = "{'name':'vvv'}"; var cjson = eval ("(" + str + ")"); alert( ...

Suggestions for a JavaScript tool that automatically crops images

Is there a tool available, either browser-based or in Java, that can analyze an uploaded image, identify different characters within it, and crop them out into separate images? For instance, if this image contains three unique runic symbols, I would like ...

How can one elevate the properties of each item's sub-structure to the root level in an array containing object items?

I am working with an array containing objects, each with a specific structure... [{ user: { /* ... more (nested) user data ... */ }, vacation: { id: 'idValue', name: 'nameValue', startDate: 'dateValue', }, }, ...

What is the best way to ensure type safety in a Promise using Typescript?

It seems that Promises in Typescript can be type-unsafe. This simple example demonstrates that the resolve function accepts undefined, while Promise.then infers the argument to be non-undefined: function f() { return new Promise<number>((resolve) ...

Generating dynamic slots in VueJS allows for the creation of

Creating slots dynamically from an array is my current task. After some tinkering, I've managed to make it work using the following code snippet: <template v-for="(department,id) in departments" v-slot:[id]="record"> < ...

Issue with Ref when used in a distinct HTML template

I have encountered a frustrating issue with my simple Vue project. When I separate the template and code into individual files, the ref stops working and I end up with an undefined value in the HTML template. This scenario works fine: map.component.vue ...

Storing a PDF created with Laravel in a queue

I have a tool that converts HTML to PDF and saves it locally. I also use a live URL to fetch another PDF and save it on my local machine. Then, I utilize a Laravel library to merge both PDFs into a single file through embedding. Previously, this process ...

Can you tell me how to achieve the functionality of the ".get" statement in JavaScript that is present in python-firebase?

After writing Python code that retrieves the entire JSON database, I attempted to achieve the same functionality in JavaScript without success. Despite its apparent straightforwardness, I have yet to discover a viable solution. var firebase = require(&apo ...

You are required to select one of the two radio buttons in order to proceed with the validation process

To prevent the user from proceeding to the next page, validation is necessary. They are required to select one of the radio buttons, etc. <div class=""> <div class="radiho" style="display: block"> <input type="checkbox" name="sp ...

Advantages and disadvantages of distinct methods for looping through HTML elements

My JS code generates HTML elements that are structured like this: <div id="container"> <div id="block_1" class="blocks"></div> <div id="block_2" class="blocks"></div> <div id="block_3" class="blocks"></di ...

Adjust Scale to Less than 1 in JVectorMap

I am in the process of developing a website that includes a full-size map using JVectorMap. The map currently occupies 100% of the width and height of the page, but I would like to add a border around it when fully zoomed out. However, when the map is zoom ...

Change the content inside a div depending on the value of a button

I am currently exploring how to change the content of a div based on button values, utilizing angular2+. Below is my implementation in HTML and js export class TestComponent implements OnInit { title:string = "provas"; constructor() { } popula ...

What is the best method for finding and observing the Javascript code being utilized on a webpage?

Is there a way to find and access specific Javascript used on a webpage? Imagine browsing through a webpage's source code and stumbling upon an element like this: <img border="0" alt="" onmouseout="hidetrail();" onmouseover="showtrail('imag ...