inertia icon indicating copy to clipboard operation
inertia copied to clipboard

Vue 3: usePage().props.filter returns null instead of expected object structure from Laravel Shared Data

Open philharmonie opened this issue 1 year ago • 3 comments

Version:

  • @inertiajs/vue3 version: 1.0.14

Describe the problem:

When attempting to access shared props using usePage().props within a Vue 3 component, specifically trying to access a nested property (filter.current.name), the expected data structure (filter) is returned as null instead of containing the nested current object. The Laravel backend correctly prepares and logs the shared data structure as containing {"current": null} when session()->get('filter') is null, indicating that the server-side logic functions as intended. However, when accessing this data on the client side through Inertia.js in a Vue 3 setup function, the entire filter object is logged as null, contrary to expectations based on the shared data from the server. I expect to receive an object with at least the current key (even if it's null) instead of the entire filter prop being null.

Steps to reproduce:

  1. Backend Setup: Use Laravel to set up an Inertia middleware (HandleInertiaRequests) that shares a filter prop, which includes a nested current object. This object is supposed to be null if there's no session data available, which is the intended and confirmed behavior through Laravel logs.

  2. Frontend Access: In a Vue 3 component, attempt to access this shared filter prop using usePage().props.filter, expecting to receive the shared data structure.

  3. Observation: Despite the backend correctly sharing the filter data structure with {"current":null}, usePage().props.filter is logged as null in the Vue 3 component's onMounted lifecycle hook, indicating a discrepancy in what's shared versus what's received.

philharmonie avatar Feb 21 '24 16:02 philharmonie

I've worked with shared data and never run into this issue. Can't really help without seeing your code.

shengslogar avatar Mar 11 '24 20:03 shengslogar

What happens if you call getShared in your controller just before returning a response?

Route::get('/users', function () {
    Inertia::share('foo', 'bar');

    dd(\Inertia\Inertia::getShared());
    return inertia('Users', [
        'users' => User::get(),
    ]);
});

Is your 'filters' property appearing in the output there? If not, it's likely an issue with how you've set up the Middleware.

craigrileyuk avatar Mar 19 '24 06:03 craigrileyuk