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

Question

我的控制器是这样的：

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)的结果不显示

为什么不显示？

我该如何解决这个问题？

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