如何在 vue 组件上显示分页 laravel？

Posted 2023-02-23

【中文标题】如何在 vue 组件上显示分页 laravel？

【英文标题】：How can I display pagination laravel on the vue component?

【发布时间】：2018-08-01 17:51:42

【问题描述】：

我的控制器是这样的：

public function index()

    $products = $this->product->list(); 
    dd($products);
    return view('admin.product.index',compact('products'));

dd($products); 的结果如下：https://postimg.org/image/w39usbfrv/

我的视图刀片 laravel 是这样的：

<section class="content">
    <product-list :product-data="json_encode($products)" :page="json_encode($products->links())"></product-list>
</section>

我的 vue 组件产品列表是这样的：

<template>
    <div class="box">
        ...
            <table class="table table-list">
                ...
                <tr v-for="item in products" :key="item.id">
                    <td>item.name</td>
                    <td>item.createdAt</td>
                    <td>item.updatedAt</td>
                </tr>
                ...
            </table>
            <div class="box-footer">
                ...
                    this.page
                ...
            </div>
        ...
    </div>
</template>
<script>
    export default 
        props: ['productData','page'],
        data()
            return 
                ...
                products: this.productData.data,
            
        ,
        ...
    
</script>

如果我运行代码，this.page 的结果是空的

如果这个：$products->links() 放置在 laravel 视图中它可以工作

但是如果传给vue组件，结果是空的

我该如何解决这个问题？

注意：

我知道如何使用 ajax 请求。但我不使用它。这里我只是想尝试另一种方式

【参考方案1】：

您不能以这种方式将其编码为 JSON，请在此处阅读有什么帮助：

https://laravel.com/docs/5.6/pagination#converting-results-to-json