Why pagination links returns json when clicked? (Vue.js 2)

Question

I have 2 component

Component 1, The name is SearchResultVue.vue component

The component is like this :

<template>
    ...
        <span class="pull-right" v-show="totalall>8">
            <pagination :data="list" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination>
        </span>
    ...
</template>

The component call component 2. The name is Pagination.vue component

The Pagination component is like this :

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a :href="prevPage" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="i in total">
                <a :href="baseUrl+'/search-result?page='+i">{{i}}</a>
            </li>
            <li>
                <a :href="nextPage" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default{
        props:['total', 'data', 'nextPage', 'prevPage'],
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        }
    }
</script>

When I click page 1 or page 2 or next page etc, on the browser display json data like this :

{"total":20,"per_page":8,"current_page":2,"last_page":3,"next_page_url":"http://chelseashop.dev/search-result?page=3","prev_page_url":"http://chelseashop.dev/search-result?page=1","from":9,"to":16,"data":[{"id":20,"name":"Bunga Hadiah","photo":"bunga7.jpg","price":1275523,"stock":68,"total_sold":25,"total_view":0,"weight":90,"store_id":9,"shop_name":"Sari Florist","formatted_address":"Jakarta"},{"id":3,"name":"Papan Bunga Wedding","photo":"bunga5.jpg","price":1988886,"stock":77,"total_sold":96,"total_view":0,"weight":40,"store_id":1,"shop_name":"Bunga Airi","formatted_address":"Kemang"}]}

Why it does not display in the form of html?

Does this API: http://chelseashop.dev/search-result?page=4 returns this JSON? — Saurabh
Than, thats what it will render, right? What is your logic around creating pagination? — Saurabh
@Saurabh, I had update my question. I make my pagination like that. I use vuex store — moses toh
@mosestoh, hi! you need to post the html section that displays your paginated data, the idea is for vue to handle the displaying of the json, so you would have the one component that has the functionality within in, and is also responsible for displaying the data too. your json data would be contained within a vuejs v-for loop and this data is then updated on the next/prev links — Simon Davies

Clorichel Clorichel · Accepted Answer · 2017-01-31T16:04:03

Using :href on <a> does not make use of Vue.js reactive functionalities.

Maybe you should read (or read again) Vue.js guide introduction, particularly the Handling User Input part.

You'll have to use an HTTP client like Axios or vue-resource from within a method (let's call it fetchData) in your component that will commit to your Vuex store.

You can then call this method through v-on:click="fetchData". As soon as your template makes use of your reactive data (through v-for to list your search results, for example), your HTML will be updated by Vue.js.

Why pagination links returns json when clicked? (Vue.js 2)

1 Answers