laravel-vue-bulma-pagination
v1.0.1
Published
Vue.js pagination component for Laravel pagination with Bulma styles
Downloads
4
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.