为什么分页链接在单击时返回json? (Vue.js 2) [英] Why pagination links returns json when clicked? (Vue.js 2)

问题描述

我有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数据:

{总计":20，每页":8，当前页":2，最后一页":3，下一页_URL":"http://chelseashop.dev/search-result?page=3"， "prev_page_url":"http://chelseashop.dev/search-result?page=1"，从":9，到":16，数据":[{"id":20，名称": 邦加 Hadiah，"照片:" bunga7.jpg，"价格:1275523，"股票:68，"已售出:25，"总浏览量:0，"重量:90，" store_id:9，" shop_name:"莎丽 花店"，"formatted_address":雅加达"}，{"id":3，名称":"Papan Bunga" 婚礼"，照片":"bunga5.jpg"，价格":1988886，库存":77，已售出":96，总浏览":0，重量":40，"store_id":1，" shop_name:"邦加 Airi"，"formatted_address":"Kemang"}]}

为什么它不以html形式显示?

解决方案

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

也许您应该阅读(或再读一次) Vue.js指南简介，尤其是<一个href ="https://vuejs.org/v2/guide/index.html#Handling-User-Input" rel ="nofollow noreferrer">处理用户输入部分.

您必须使用HTTP客户端，例如 Axios 或调用此方法.模板一旦利用了反应性数据(例如，通过v-for列出搜索结果)，HTML就会通过Vue.js进行更新.

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?

解决方案

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.

这篇关于为什么分页链接在单击时返回json? (Vue.js 2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！