laravel-vue-bulma-pagination
v1.0.1
Published
Vue.js pagination component for Laravel pagination with Bulma styles
Downloads
10
Maintainers
Readme
Laravel Vue Bulma Pagination
Vue.js pagination component for Laravel pagination with Bulma.
Requirements
Install
npm install laravel-vue-bulma-pagination
Usage
Controller method:
$tagsData = Tag::paginate(10);
return response()->json([
'success' => true,
'tagsData' => $tagsData
]);
Register the component:
import pagination from 'laravel-vue-bulma-pagination';
export default {
components: {
pagination
}
}
or globaly
Vue.component('pagination', require('laravel-vue-bulma-pagination'));
Use the component:
<pagination v-bind:pagedata="tagsData" v-on:page-clicked="getTagsList"></pagination>
<table>
<tr v-for="tag in tags">
<td>{{ tag.id }}</td>
<td>{{ tag.name }}</td>
</tr>
</table>
export default {
data: () => ({
tags: [],
tagsData: {}
}),
methods: {
getTagsList(page){
var vm = this;
if(page == undefined){
var pageUrl = '/admin/posts/tags/list';
}else{
var pageUrl = '/admin/posts/tags/list?page=' + page;
}
axios.get(pageUrl).then(function(response){
if(response.data.hasOwnProperty('success')){
vm.tagsData = response.data.tagsData;
vm.tags = response.data.tagsData.data;
}
}).catch(function(error){
console.log(error);
});
}
}
}
Props
| Name | Type | Description |
| --- | --- | --- |
| pagedata
| Object | An object contains the value of a Laravel pagination response. |
Events
| Name | Description |
| --- | --- |
| page-clicked
| Triggered when a user changes page. Passes the new page
number as a parameter. |
Credits
I got inspired by seeing this repository laravel-vue-pagination.
Released under the MIT license.