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

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/41952393/why-pagination-links-returns-json-when-clicked-vue-js-2