Sending Innertia data with Laravel Controller and Retrieve in Vue Components Not Working-CodePudding

I'm using Inertia helper method and trying to send a message to Vue Components but noting working.

public function contact_to_project(){
    $message = "Room Added";
    return Inertia('Contact_to_project', [
        'message' => $message
    ]);

}

My Vue Componets

<template> {{message}}</template>


<script>
  export default {
     props: {
        message: String,
     },
  }
</script>

But I'm able to get data using redirect with shared data using innertia

  public function contact_project(){
     $user= User::find(Auth::id())->has_many_through_projects_contents();
    $message= $user->paginate(1);
    return redirect('contact_to_project')->with('message', $message);
}

Here I've Defined the props that are shared.

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'flash' => [
            'message' => fn () => $request->session()->get('message')
        ],
    ]);

}

And getting the result using props in vue

 <div v-if="$page.props.flash.message" >
                        {{ $page.props.flash.message }}
 </div>

So how can I get data normally without the redirect method?

CodePudding user response：

I'm unsure about the phrasing of your question. I'm guessing that you mean you want to know how to use flashed data outside of when redirecting.

Accessing flashed data in Inertia.js is not much more difficult than doing it in a vanilla Laravel app. You're on the the right track, but seem to be missing how flash data without using a redirect.

In Laravel the flashed data is stored in the session on the request. So if you want to set a message on the current request then you do it like so:

request()->session()->flash('status', 'Task was successful!');

After this you just render Vue.js component as per the Inertia.js docs.

In your case it all would look something like this:

public function contact_project(){
    $user = User::find(Auth::id())->has_many_through_projects_contents();
    $message = $user->paginate(1);

    request()->session()->flash('message', $message);

    return inertia('Contact_to_project');
}

Then you access it like you mentioned in your question.

<div v-if="$page.props.flash.message" >
    {{ $page.props.flash.message }}
</div>

CodePudding user response：

You are not accessing the property the right way. Since props is the wrapper for all of the data you send from the server, the way you access them is by using props first.

<template> {{props.message}}</template>