Working example with json data

[oflittlemother]

Question: Is there a jsFiddle that has the component working with json data?

I can't figure out where to output my data so it correctly paginates. Thank you!

[mkraha]

+1

[mkraha]

Here is my code and replace JSONURL with urs. JS

Vue.component('paginate', VuejsPaginate)

new Vue({
	el: '#root',
	data () {
		return {
			products: [],
			pageCount: ''
		}
	},
	mounted() {
		this.fetchData();
	},

	methods: {
		fetchData() {
			axios.get('**JSONURL**')
			.then(response => {
				this.products = response.data.data,
				this.pageCount = response.data.last_page
			})
		},
		
		clickCallback: function(pageNumber) {
	    	axios.get("**JSONURL**?page="+ pageNumber)
	    	.then((response) => {
				this.products = response.data.data,
				this.pageCount = response.data.last_page
			});
	    }
	}
});

HTML

<paginate
  :page-count = "pageCount"
  :page-range="5"
  :prev-text="'Prev'"
  :next-text="'Next'"
  :container-class="'pagination'"
  :page-class="'page-item'"
  :click-handler="clickCallback">
</paginate>