InertiaJS + Vue3 - issues with tabbed content and prop updating
Hey,
I know some parts of my problems have been discussed here on the forum but what. I found it didn't help.
I have setup like that:
- DashboardController - on initial page loads I'm grabbing a few items out of DB and displaying it on the screen, works fine.
- GoalsController - I have there methods for updating, adding etc - works fine.
- I have on my Dashboard component 3 tabs, upon click what happens now I am adding query param and retrieving data filtered by that param.
I have couple of issues.
First off - I can't seem to preserve URL. When I am on any tab and click a button to update something on one of the displayed items inertia does that and item is updated, request goes off to the GoalsController but I think it causes the page to reload and URL goes away.
/**
* Update the goal.
*
* @param UpdateGoal $request
* @return RedirectResponse
*/
public function update(UpdateGoal $request): RedirectResponse
{
$this->goalsRepository->update($request->only([
'id',
'title',
'public',
'description',
'completed',
'endDate'
]));
if ($request->has('completed') && $request->completed) {
Session::flash('message', 'Congratulations, your goal is now visible in the "Achievements" tab!');
} else {
Session::flash('message', 'Goal updated successfully!');
}
return to_route('dashboard');
}
The second issue is that when I display content in any of the tabs after a successful request for updating content it doesn't refresh the page props. Updated props are returned and I even tried doing stuff like
const page = usePage();
const goals = computed(() => page.props.goals)
So I am making a put request router.put() and DB updates just fine but no reactivity and it looks like whenever I get some it all causes a full page reload.
Makes me think Inertia is just not the right tool but so many people say it is so great that it also makes me think I am doing something wrong.
It looks like if I want to have reactivity without page reload I have the create separate controllers for each tab? As in making them separate pages? That seems a bit insane.
Is there anything obvious I am doing wrong? I've seen statements claiming inertia apps don't need endpoints and API but looks like this is not true.
Please or to participate in this conversation.