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>