I've got an Inertiajs app in which I call a component with the following link:
<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>
Then, in my web.php file I pass it to the next component as a prop as follows:
Route::get('/explore-data', function (\Illuminate\Http\Request $request) {
return Inertia::render('ExploreData', [
'cities' => \App\Models\City::all(),
'selectedIds' => $request->selectedIds
]);
});
In my ExploreData component, I try to access the selectedIds prop in my created hook, but printing it out shows me that it's null. What is strange is that this only happens on my server, when I do this on localhost it works fine. Here is how I declare the prop and try to call it in the ExploreData component:
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
})
....
Does someone know what could be happening here and how to fix it?
I found that this was actually an issue with Nginx and not with Inertia / Vue. My nginx config had the following setting that specifies how to handle the query string:
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;
}
And I had to change it to the following:
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;
}
I don't claim to understand nginx, but I just know the first setting didn't pick up the query string properly.