object 使用道具从刀片传递到 vue 组件时未定义

Question

I'm trying to pass an array from async method in the controller to a vue component using props through the blade, but I'm getting undefined when I try to console.log it in the vue component, this is my code:

Controller:

    public function index(){


           $pool = Pool::create();

           $pool[] = async(function () {

                     return Rfm::all();

           })->then(function ($output) {

           $this->results=$output;
           });

           await($pool);

    return view ("/dashboard", ["data" => $this->results]);

Blade:

   <div id="total_customers">
       <total-customers :data="{{$data}}"></total-customers>
   </div>

Vue component:

export default {
props: ['data'],

data() {
    return {
        
    };
},
mounted() {
    console.log(this.data);
}
};

I've searched and read somewhere that using async in the controller would be the problem as the object is still empty when it render to vue component, but I'm not sure about that, am i doing it wrong?

Answer 1

Binding props that way might work with strings and integers but doesn't work with array/object data: https://laravel.com/docs/9.x/blade#blade-and-javascript-frameworks

The following should work:

<total-customers :data="{{ Js::from($data) }}"></total-customers>

Addition: Might want to look into https://inertiajs.com/ if you bind data to vue components in blade a lot, its a nicer way to render vue components with props