How to preserve component state?

[mansoorkhan96]

Hey,

First of all great work on route-based modals and thanks for sharing it.

I am playing around with this package. I have a Vue component where I have a reactive property:

const tabs = reactive([
    { name: 'General', active: true },
    { name: 'Photos', active: false },
])

I jump around tabs by changing the active property of tabs. When i open up a modal from this component and when it comes back, the active tab is not the same.

<Link 
    :href="route('route.test')" 
    :data="{activeTab: 'Photos'}" 
    :only="['modal', 'flash']" 
    preserve-state 
    preserve-scroll
>
    Show All Photos
</Link>

I also tried to bind the active tab state to url param but that does not work as ->baseRoute() would not take url params.

How can i solve this issue?

Any kind of help would be appreciated.

[lepikhinb]

Modals act as regular Inertia pages, so the state is up to Inertia implementation. From what I can see, preserve-state should work well.

Does the state reset on modal open or close?

[mansoorkhan96]

Does the state reset on modal open or close?

Yes the state resets on open or close and after adding the 'preserve-state', the state is preserved on open but not on close.

Not sure what i am doing wrong.

[lepikhinb]

Just fixed! This should work well with the recent update.

Update the npm dependency to the latest version (0.1.11).

[mansoorkhan96]

Thanks @lepikhinb

Its works really well now :)

Loving your package, great work.