https://github.com/mrosendin/vue-bulma-pagination

Vue.js 2 Bulma pagination component
https://github.com/mrosendin/vue-bulma-pagination

bulma pagination vue

Last synced: about 1 month ago
JSON representation

Vue.js 2 Bulma pagination component

• Host: GitHub
• URL: https://github.com/mrosendin/vue-bulma-pagination
• Owner: mrosendin
• License: mit
• Created: 2017-06-06T21:39:13.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-03-03T02:13:24.000Z (almost 6 years ago)
• Last Synced: 2024-02-23T07:01:49.481Z (10 months ago)
• Topics: bulma, pagination, vue
• Language: Vue
• Homepage: https://mattrosendin.github.io/vue-bulma-pagination/
• Size: 298 KB
• Stars: 13
• Watchers: 6
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Bulma Pagination

[![npm version](https://badge.fury.io/js/vue-2-bulma-pagination.svg)](https://badge.fury.io/js/vue-2-bulma-pagination)

> A Vue.js pagination component for the Bulma CSS framework

View the [demo](https://rosendin.github.io/vue-bulma-pagination/).

## Installation

Install via NPM:

``` bash

npm install vue-2-bulma-pagination --save

```

## Usage

**Props**

|Name|Type|Required|Default|Description|

|----|----|--------|-------|-----------|

|current|Number|True|N/A|Current page|

|total|Number|False|0|Total number of items|

|itemsPerPage|Number|True|N/A|Items per page|

|step|Number|False|3|Number of pages to display (besides first and last)|

|onChange|Function|True|N/A|Page changed event callback. Parameters: page|

**Example**

Use like below. See the [example code](https://github.com/roseware/vue-bulma-pagination/blob/master/src/Demo.vue) in the demo.

``` html

  

    

      

        {{ key }}

      

    

    

      

        {{ country[key] }}

      

    

  

  

  

import Pagination from 'vue-2-bulma-pagination'

import axios from 'axios';

let pagination = {

  current: 1,       // Current page

  total: 0,         // Items total count

  itemsPerPage: 5   // Items per page

}

export default {

  name: 'demo',

  components: { Pagination },

  data () {

    return {

      countries: [],

      pagination: pagination

    }

  },

  methods: {

    onChange (page) {

      console.log(`Getting page ${page}`)

      axios.get(`https://api.openaq.org/v1/countries?limit=5&page=${page}`)

      .then(response => {

        this.countries = response.data.results

        this.pagination.current  = page

      })

    }

  },

  created () {

    axios.get('https://api.openaq.org/v1/countries?limit=5')

    .then(response => {

      this.keys = Object.keys(response.data.results[0])

      this.countries = response.data.results

      // Set pagination config based on response

      this.pagination.total = response.data.meta.found

    })

  }

}

```

## Development

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).