Level 104
Typoin the share array - errror, should be error
Oct 12, 2022
19
Level 1
Inertia JS Flash message not printing on vue component
Hey Folks, I have two flash message save in "HandleInertiaRequest.php" as follow:
public function share(Request $request)
{
return array_merge(parent::share($request), [
'ziggy' => function () use ($request) {
return array_merge((new Ziggy)->toArray(), [
'location' => $request->url(),
]);
},
'flash' => [
'message' => fn () => $request->session()->get('success'),
'errror' => fn () => $request->session()->get('error'),
],
]);
}
Now when a user is successfully added i used the success message and if i got error i use error message. Thing is success message is working fine but error message is not printing. Although i have checked by inspecting vue i'm getting the page/flash/error message successfully. Can you please guide where i'm making mistake ?
Here is the controller code: public function station(Request $request) { $count = DB::table('stations')->where('ChildID', '=', $request->ChildID)- >get(); if (count($count) > 0) { return back()->with([ 'error' => 'Station Record Already Exisits in this station' ]); } else { //Perform db Inert and return back return back()->with([ 'success' => 'Station Record Added' ]); }
?>
Here is the vue code:
<div v-if="$page.props.flash.error" class="alert_error">
{{ $page.props.flash.error }}
</div>
<div v-if="$page.props.flash.message" class="alert">
{{ $page.props.flash.message }}
</div>
Level 1
@tykus Although i have fix the typo error but still its not showing anything
Level 104
@nutkani1337 do you have Vue devtools installed; can you check the contents of the Page attributes/props?
Level 1
@tykus Yeah in dev tool i'm getting the value that i have already defined. Issue is with printing
Level 104
@nutkani1337 strange... no error message(s) in the console either? You are running your latest compiled build, right?
Level 102
You can debug what is in your props by using
import { usePage } from '@inertiajs/inertia-vue3'
console.log(usePage().props)
Level 102
Try using this. And inertia will automatically inject it in props
return back()->withErrors([ 'station' => 'Station Record Already Exists in this station' ]);
2 likes
Level 1
@Sinnbeck No luck, Actually i'm getting the value in vue devtools page attribute/props. Then why it's not printing it in component ?
Level 102
@nutkani1337 It seems you are trying to get it from flash not props? Isnt the errors located here? Of not, show where it is located
$page.props.errors
Level 1
@Sinnbeck {{ $page.props.flash.error }}
this is how i'm trying to print.
Inertia Request
'flash' => [ 'message' => fn () => $request->session()->get('success'), 'error' => fn () => $request->session()->get('error'),
],
Level 104
@nutkani1337 it is very strange that it would not be renderable in the template if Vue is getting the prop.
Can you try this in the script
let flash = usePage().props.value.flash;
And in the template
<div v-if="flash.error" class="alert_error">
{{ flash.error }}
</div>
<div v-if="flash.message" class="alert">
{{ flash.message }}
</div>
Level 1
@tykus No luck bro. If i'm getting the flash message correctly why not the error. Do i need to store it in the session or something ?
Level 104
@nutkani1337 you said that the error message is available in the Vue application, no? But you simply cannot render it?
Level 1
@tykus yeah that what I'm saying but I can clearly see that in setup/page/props/flash/error and message (depends on the scenario)
Level 104
@nutkani1337 this isn't something like alert_error having a display:none styling, does it???
Level 1
@tykus no bro its just basic style to highlight alert message .alert_error { padding: 15px; background-color: red; color: white; }
Level 104
@nutkani1337 stumped...
Level 1
@tykus me to xD
Level 104
Can you share the contents of the shared data that its being passed to the page?
Please or to participate in this conversation.