如何将分页数据和数组从控制器 laravel 传递到 vue 组件？

Posted 2023-02-23

【中文标题】如何将分页数据和数组从控制器 laravel 传递到 vue 组件？

【英文标题】：How can I pass pagination data and array from controller laravel to vue component?

【发布时间】：2018-07-31 21:40:32

【问题描述】：

我的控制器是这样的：

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 :products="$products" test="test"></product-list>
</section>

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

<template>
    <div class="box">
        ...
    </div>
</template>
<script>
    export default 
        props: ['products','test'],
        mounted()
            console.log(this.test)
            console.log(this.products)
        
        ...
    
</script>

如果我运行代码，在控制台上只显示console.log(this.test)的结果

console.log(this.products)的结果不显示

为什么不显示？

我该如何解决这个问题？

【问题讨论】：

为什么这个问题被否决了？

没有人可以帮忙吗？

【参考方案1】：

您应该重新考虑如何在 vue 组件中访问数据。不是让控制器将数据与视图一起传递，而是从客户端发出请求以获取数据。更改路由方法以响应 ajax 和常规请求：

public function index(Request $request) 
    if ($request->ajax()) 
        return response()->json(['products'  => $this->product->list()]);
    

    return view('admin.product.index'); 

从客户端，使用axios 获取数据：

<script>
  import axios from 'axios

  export default  
    mounted() 
        axios.get('/products').then(response => 
          this.products = response.data.products
        
     ,
     data () 
        return 
          products: []
        
      
    ... 
   
</script>

【讨论】：

我知道。但在这里我只想尝试另一种方式