Tengo una aplicación Inertiajs en la que llamo a un componente con el siguiente enlace:
<Link href="/explore-data" class="rounded-lg bg-blue-500 hover:bg-blue-200 text-white text-md font-semibold tracking-wide p-2" :data="{ selectedIds: selectedIds }"> Proceed </Link>Luego, en mi archivo web.php lo paso al siguiente componente como accesorio de la siguiente manera:
Route::get('/explore-data', function (\Illuminate\Http\Request $request) { return Inertia::render('ExploreData', [ 'cities' => \App\Models\City::all(), 'selectedIds' => $request->selectedIds ]); });En mi componente ExploreData, trato de acceder a la propiedad selectedIds en mi gancho creado, pero al imprimirlo me muestra que es nulo. Lo extraño es que esto solo sucede en mi servidor, cuando hago esto en localhost funciona bien. Así es como declaro el accesorio e intento llamarlo en el componente ExploreData:
export default { props: { selectedIds: Object, cities: Object }, ... created() { let t = this console.log('Selected IDS: ') console.log(this.selectedIds) // this gives me NULL on server, but not on localhost this.selectedIds.forEach(function(item) { // do something with my selectedIds }) ....¿Alguien sabe qué podría estar pasando aquí y cómo solucionarlo?
Descubrí que esto era en realidad un problema con Nginx y no con Inertia / Vue. Mi configuración de nginx tenía la siguiente configuración que especifica cómo manejar la cadena de consulta:
location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. try_files $uri $uri/ /index.php?query_string; }Y tuve que cambiarlo a lo siguiente:
location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. try_files $uri $uri/ /index.php$is_args$query_string; }No pretendo entender nginx, pero solo sé que la primera configuración no recogió la cadena de consulta correctamente.