为什么分页链接在单击时返回json？ （Vue.js 2）

Question

我有2个组件

组件1，名称为SearchResultVue.vue组件

组件是这样的：

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

组件调用组件2.名称为Pagination.vue组件

Pagination组件是这样的：

<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>

当我点击第1页或第2页或下一页等时，在浏览器上显示如下的json数据：

  

{＆＃34;总＆＃34;：20，＆＃34; per_page＆＃34;：8，＆＃34; CURRENT_PAGE＆＃34;：2＆＃34; last_page＆＃34;：3，＆＃ 34; next_page_url＆＃34;：＆＃34; HTTP：//chelseashop.dev/search-result页= 3＆＃34;＆＃34; prev_page_url＆＃34;：＆＃34; HTTP：//chelseashop.dev /搜索结果页面= 1＆＃34;＆＃34;从＆＃34;：9＆＃34;至＆＃34;：16，＆＃34;数据＆＃34;：[{＆＃34; ID＆ ＃34;：20，＆＃34;名称＆＃34;：＆＃34;文雅   Hadiah＆＃34;＆＃34;相片＆＃34;：＆＃34; bunga7.jpg＆＃34;＆＃34;价格＆＃34;：1275523，＆＃34;股票＆＃34; 68＆＃34 ; total_sold＆＃34;：25，＆＃34; total_view＆＃34;：0，＆＃34;重量＆＃34;：90，＆＃34; STORE_ID＆＃34;：9，＆＃34; shop_name＆＃34 ;: ＆＃34;萨里   花店＆＃34;＆＃34;的formatted_address＆＃34;：＆＃34;雅加达＆＃34;}，{＆＃34; ID＆＃34;：3，＆＃34;名称＆＃34;：＆＃34;帕潘文雅   婚礼＆＃34;＆＃34;相片＆＃34;：＆＃34; bunga5.jpg＆＃34;＆＃34;价格＆＃34;：1988886，＆＃34;股票＆＃34;：77，＆＃34 ; total_sold＆＃34;：96，＆＃34; total_view＆＃34;：0，＆＃34;重量＆＃34; 40＆＃34; STORE_ID＆＃34;：1，＆＃34; shop_name＆＃34 ;: ＆＃34;文雅   爱理＆＃34;＆＃34;的formatted_address＆＃34;：＆＃34;克芒＆＃34;}]}

为什么它不以html的形式显示？

Answer 1

在:href上使用<a>不会使用Vue.js反应功能。

也许您应该阅读（或再次阅读）Vue.js guide introduction，尤其是Handling User Input部分。

您必须在组件中使用类似Axios或vue-resource的HTTP客户端（我们称之为fetchData），这将提交到您的Vuex商店。< / p>

然后，您可以通过v-on:click="fetchData"调用此方法。只要您的模板使用您的被动数据（例如，通过v-for列出您的搜索结果），您的HTML就会被Vue.js更新。