Retrieving the current page in Vue.js

When working with Vue, I use the following code for pagination:

<b-pagination
  :total-rows="props.total"
  first-number
  last-number
  align="right"
  prev-class="prev-item"
  next-class="next-item"
  class="mt-1 mb-0"
  @input="changePage"
>
</b-pagination>

Below is an example of pagination:

<< 1 2 3 4 >>

methods: {
    changePage() {
         //retrieve current page here
    }
}

I am now looking to access the current page in my methods. Any suggestions or ideas would be greatly appreciated. Thank you.

Answer №1

Need help with b-pagination? Check out this helpful guide. bootstrap-vue

<script>
      export default {
        data() {
          return {
            perPage: 3,
            currentPage: 1,
            items: [
              { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
              { id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
              { id: 3, first_name: 'Barney', last_name: 'Rubble' },
              { id: 4, first_name: 'Betty', last_name: 'Rubble' },
              { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
              { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
              { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
              { id: 8, first_name: 'Rockhead', last_name: 'Slate' },
              { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
            ]
          }
        },
        computed: {
          rows() {
            return this.items.length
          }
        }
      }
    </script>

    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      aria-controls="my-table"
    ></b-pagination>

Make sure to match the names for currentPage in your v-Model and b-table's ":current-page".

 <p class="mt-3">Current Page: {{ currentPage }}</p>   

<b-table id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      small
    ></b-table>

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

Guide to linking NodeJs with an Atlas mongodb Cluster

I am currently in the process of setting up a new application that utilizes an Atlas Database with node. Unfortunately, I keep encountering an error message that reads: "MongoError: MongoClient must be connected before calling MongoClient.prototype.db". ...

Issue with Nuxt 3 and .nojekyll file not being effective on Github Pages

I am facing some challenges while attempting to deploy my nuxt project on a github page. I have included the .nojekyll file in the public folder, but even after running generate, files with "_" are still showing up under public/static. https://i.sstatic ...

Can the chosen date in a calendar date picker be linked to a variable that is accessible to a separate file?

Currently, I am developing a React application and have integrated a date picker feature using Ant Design to enable users to select a date range. My goal is to store the selected date value into a variable that can be accessed by another file in my progr ...

Explanation of JavaScript code snippet

fnTest = /abc/.test(function () { abc; }) ? /\bchild\b/ : /.*/; I am struggling to comprehend the functionality of this particular javascript snippet. Would someone be able to elaborate on the logic behind this code fragment? ...

Experiencing challenges with Vuetify layout: Having difficulty preventing 3 flex elements from exceeding the height of the screen

I'm currently facing some challenges with the vuetify layout grid. Within my component, I have a v-layout containing 3 v-flex elements. One for the toolbar (top), one for the content (middle), and another for the action bar (bottom). The issue I&apo ...

Accessing the parent div in an Ajax success function

I am looking for a solution to hide a parent div when a link is clicked and an ajax call is successfully made. I have tried placing the hide() function within the success part of the ajax call, but it seems to not work: $('.mylink').click(functi ...

What is the best way to incorporate parallax scrolling in the center of a webpage?

I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling. I attempted to use intersection observer, but unfortunately, it did not resolve the problem. const ...

Dynamic resizing in NextJs does not trigger a re-render

My goal is to dynamically pass the width value to a component's styles. Everything works fine on initial load, but when I resize the window, the component fails to re-render even though the hook is functioning as intended. I came across some informat ...

In a Next.js project, Typescript seems to be overlooking errors related to proptype definitions and function types

Greetings everyone! I am currently working on a project using TypeScript and have implemented various rules and elements. However, I am facing issues with type errors for functions and props. Essentially, when using any function, it is necessary to specify ...

Having trouble aligning the canvas of threejs next to a div

I am currently working on a shoe customizer project and facing difficulties in aligning my canvas (using three.js) next to the shoe customizer div. Although I posted the same question earlier, I did not receive a satisfying solution. I made some adjustment ...

Changing the hover color of an Angular Material MD Button

<div class="non-active" layout layout-align='space-around center'> <md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == ' ...

Querying the database to check for the presence of a file in a .js file on Google App Engine

I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...

Extracting Data from Multiple Pages Using Python 3 without Changing URL

Recently, I delved into the world of web scraping and decided to try my hand at grabbing data from various websites. Currently, I'm focused on scraping information from the site - Using selenium, I've managed to extract longitude and latitude da ...

Obtain the initial element in a table using pure Javascript

There are two tables presented in the following format: <table> <tr> <td></td> <td></td> </tr> </table> <table> <tr> <td></td> <td>&l ...

Encountering a missing value within an array

Within my default JSON file, I have the following structure: { "_name":"__tableframe__top", "_use-attribute-sets":"common.border__top", "__prefix":"xsl" } My goal is to add values by creating an array, but I am encountering an issue where my ...

Prevent the hiding of a select element with jQuery Chosen Select

I am facing difficulty hiding a select element with the chosen-select class if it does not have any elements present. I attempted: $("#Category2").hide(); and also tried removing the chosen-select class before hiding the element: $("#Category2").re ...

Cookie authentication with Wp-api 2

I'm currently working on a php page within WordPress (using WP-Api 2): <?php /** * Template Name: WP-Api */ add_action("wp_enqueue_scripts", "enqueue_"); function enqueue_() { wp_localize_script( 'wp-api', 'wpApiSettings&apos ...

Locate the class ID and refine the search results by another class

I am currently working on a task that involves extracting the first <li> element's id where it has the class name my_class, and checking if the <span> with the class Time contains a ":" using jquery. Below is the sample HTML structure: & ...

Vue Transition for collapsing elements

I'm trying to incorporate Vue's collapse feature into my code, but I'm encountering an error. [Vue warn]: <transition-group> children must be keyed: <p> The component in question: <template xmlns:v-model="http://www.w3.org ...

Are you making alterations to the URL?

Is there a way to change the displayed URL on a webpage to show "bananas" instead of "http://example.com/" after the page has loaded? ...