mrosendin/vue-bulma-pagination

Vue.js 2 Bulma pagination component

Vue Bulma Pagination

A Vue.js pagination component for the Bulma CSS framework

View the demo.

Installation

Install via NPM:

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 in the demo.

<template>

  <table class="table">
    <thead>
      <tr>
        <th v-for="(key, value) in countries[0]">{{ key }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="country in countries">
        <td v-for="key in keys">{{ country[key] }}</td>
      </tr>
    </tbody>
  </table>

  <pagination
    :current="current"
    :total="total"
    :itemsPerPage="itemsPerPage"
    :onChange="onChange">
  </pagination>

</template>

<script>
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
    })
  }
}
</script>

Development

# 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.

vue-bulma-pagination's Issues

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

Pagination.vue line 7: :key="element"
It's better to use element.page instead of element there.

Demo link points to 404 page

Link used: https://roseware.io/vue-bulma-pagination

Warning: component lists rendered with v-for should have explicit keys

It needs additional 'key' attribute at Pagination.Vue line 7.
Like <component v-for="element in elements" :key="element.page" ...>

Full message text from Webpack:

./~/vue-loader/lib/template-compiler?{"id":"data-v-62cc492c","transformToRequire":{"audio":"src"}}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-2-bulma-pagination/src/Pagination.vue
(Emitted value instead of an instance of Error) <component v-for="element in elements">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
 @ ./~/vue-2-bulma-pagination/src/Pagination.vue 9:2-200
 @ ./~/vue-2-bulma-pagination/index.js
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/BasicTable.vue
 @ ./src/components/BasicTable.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/home/device-selector.vue
 @ ./src/components/home/device-selector.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/home/page.vue
 @ ./src/components/home/page.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Error in readme

Can you please fix code example:
import Pagination from 'vue-2-pagination-bulma'
to
import Pagination from 'vue-2-bulma-pagination'

Event emitter

Hi!

Can you please explain what is the reason to use function onChange instead of emitting event @change?

Import failed

When importing
import Pagination from "vue-2-bulma-pagination";
Module build failed: Error: Couldn't find preset "env" relative to directory "*\node_modules\vue-2-bulma-pagination"

Possible fix maybe you need to commit .env file? Because for now it is in .npmignore.