CODEWITHSUNDEEP
laravelvue.jsvuejs3inertiajslaravel-9
user4370090
user4370090

Reputation:

How to show inertia data to Vue Componets?

In Vue Inspector I'm actually getting the message, But I'm not sure how to use it on Vue Components.

Please check out the image link

https://ibb.co/2KTmstS

I'm using Inertia helper method and sending a message to Vue Components but nothing working.

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

}

My Vue Componets

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


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

Upvotes: 2

Views: 12239

Answers (4)

recluzegeek
recluzegeek

Reputation: 1

Although, my answer may not be aligned with the question, but I faced similar situation, where I need to pass the flashed message to the vue component upon upload completion. Also this solves the error:

_ctx.props is undefined "Uncaught (in promise) TypeError: _ctx.props is undefined"

Here are the steps I took solve the issue:

  • Flash the success state to the session.
$request->session()->flash('files_upload_success', "Files uploaded successfully!");
  • Pass the flashed message to inertia view
Route::get('/dashboard', function () {
  return Inertia::render('Dashboard', [
    'flash' => [
      'message' => session()->get('files_upload_success')
    ]
  ]);
})->middleware(['auth', 'verified'])->name('dashboard');
  • Then in the inertia vuejs view, access the flash.message property on the $page.props
<div v-if="$page.props.flash.message"class="alert">
  $page.props.flash.message }}
</div>

Refer: Flash Messages

Upvotes: 0

Dawlatzai Ghousi
Dawlatzai Ghousi

Reputation: 3978

According to your question in your vue component you can define the data as props and then you can show it in your template like the below example:

<script setup>

import { Inertia } from '@inertiajs/inertia';

const props = defineProps({
    message: {
        type: String
    },
});

</script>

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

Upvotes: 3

Linus Juhlin
Linus Juhlin

Reputation: 1273

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.

Passing data with Inertia.js

Passing data to inertia is pretty straightforward.

First you set up a controller method that returns an inertia response with the data you want to pass as a prop to your component.

class HomeController extends Controller
{
    public function show()
    {
        return inertia('ContactPage', [
            'message' => 'My message!',
        ]);
    }
}

Then make setup your Vue.js component

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

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

Then you are good to go! You should now be able to see My message!, when you go to the route corresponding to your controller.

Flash message without redirect

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" class="alert">
    {{ $page.props.flash.message }}
</div>

Upvotes: 1

Vidral Bonvi
Vidral Bonvi

Reputation: 649

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>

Upvotes: -1

Related Questions