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

我的控制器是这样的：

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

dd（$products）的结果如下所示：

我的观点是这样的：

<section class="content">
    <product-list :products="{{$products}}" test="test"></product-list>
</section>

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



我的vue组件产品列表如下：

<section class="content">
    <product-list :products="{{$products}}" test="test"></product-list>
</section>

<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）
}
...
}

如果我运行代码，在控制台上只显示
console.log（this.test）

console.log（this.products）
的结果不显示

为什么不显示

如何解决此问题？
您应该重新考虑如何访问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>


从“axios”导入axios
导出默认值{
安装的（）{
获取（'/products'）。然后（响应=>{
this.products=response.data.products
}
},
数据（）{
返回{
产品：[]
}
}
... 
} 
为什么这个问题被否决？没有人能帮上忙吗？我知道。但在这里，我只想尝试另一种方式