为什么点击时分页链接返回json？ (Vue.js 2)答案

【问题标题】：Why pagination links returns json when clicked? (Vue.js 2)为什么点击时分页链接返回json？ (Vue.js 2)
【发布时间】：2017-06-16 14:00:12
【问题描述】：

我有 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组件

分页组件是这样的：

<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 数据如下：

{"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": “邦加 Hadiah","照片":"bunga7.jpg","price":1275523,"stock":68,"total_sold":25,"total_view":0,"weight":90,"store_id":9," shop_name":"纱丽花店","formatted_address":"雅加达"},{"id":3,"name":"Papan Bunga 婚礼","照片":"bunga5.jpg","price":1988886,"stock":77,"total_sold":96,"total_view":0,"weight":40,"store_id":1," shop_name":"邦加 Airi","formatted_address":"Kemang"}]}

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

【问题讨论】：

此 API：http://chelseashop.dev/search-result?page=4 是否返回此 JSON？
@Saurabh，是的。它返回 json
比，这就是它会呈现的内容，对吧？您创建分页的逻辑是什么？
@Saurabh，我更新了我的问题。我就是这样做分页的。我使用 vuex 商店
@mosestoh，嗨！您需要发布显示分页数据的 html 部分，这个想法是让 vue 处理 json 的显示，因此您将拥有一个具有内部功能的组件，并且还负责显示数据。您的 json 数据将包含在 vuejs v-for 循环中，然后在下一个/上一个链接上更新此数据

标签： javascript json vue.js laravel-5.3 vuejs2

【解决方案1】：

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

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

您必须在将提交到 Vuex 存储的组件中的方法（我们称之为 fetchData）中使用 HTTP 客户端，例如 Axios 或 vue-resource。

然后您可以通过v-on:click="fetchData" 调用此方法。一旦您的模板使用了您的响应式数据（例如，通过 v-for 列出您的搜索结果），您的 HTML 将由 Vue.js 更新。

【讨论】：