laravel-vue-bulma-pagination v1.0.1

Laravel Vue Bulma Pagination

Vue.js pagination component for Laravel pagination with Bulma.

Requirements

• Vue.js
• Laravel
• Bulma

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

Events

Credits

I got inspired by seeing this repository laravel-vue-pagination.

Released under the MIT license.

Screenshot