Estoy tratando de pasar una matriz del método asíncrono en el controlador a un componente vue usando accesorios a través de la hoja, pero no estoy definido cuando intento consolar. Regístrelo en el componente vue, este es mi código:
Controlador:
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]);Espada:
<div id="total_customers"> <total-customers :data="{{$data}}"></total-customers> </div>Componente Vue:
export default { props: ['data'], data() { return { }; }, mounted() { console.log(this.data); } };He buscado y leído en alguna parte que usar async en el controlador sería el problema ya que el objeto todavía está vacío cuando se procesa en el componente vue, pero no estoy seguro de eso, ¿lo estoy haciendo mal?
Vincular accesorios de esa manera podría funcionar con cadenas y números enteros, pero no funciona con datos de matriz/objeto: https://laravel.com/docs/9.x/blade#blade-and-javascript-frameworks
Lo siguiente debería funcionar:
<total-customers :data="{{ Js::from($data) }}"></total-customers>Adición: es posible que desee consultar https://inertiajs.com/ si vincula mucho los datos a los componentes de vue en Blade, es una forma más agradable de representar los componentes de vue con accesorios