Question 233562 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel Vue Inertia Show Component with Data in Dashboard Undefined

I’m practicing a bit with Laravel, Vue and Inertia. I have the following problem now. I have created a Dashboard.vue page and various components that are displayed as a section on this dashboard. Generally I can see the section with the included components. Like:

<section class="overflow-x-auto w-full">
 <Search />
</section>

However, I have a component that loads data from the MySQL database. These are not shown values from Database in the dashboard. Only

"<p v-else> No hins available.</p"

Hin.vue:

  <template>
  <div>
    <ul v-if="hins && hins.length > 0">
      <li v-for="hin in hins" :key="hin.id">
        {{ hin.id }} - {{ hin.hin }} - {{ hin.description }}
      </li>
    </ul>
    <p v-else>No hins available.</p>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";

const props = defineProps({
  hins: Array,
});
</script>

Dashboard like this:

<script setup>
import { Head, Link } from "@inertiajs/vue3";
import Test1 from "./Test1.vue";
import Test2 from "./Test2.vue";
import Hin from "./Hin.vue";
import { ref } from "vue";

</script>

<script>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";

export default {
    layout: AuthenticatedLayout,
};
</script>

<template>
    <Head title="Dashboard" />
        <section>
          <Test1 />
         </section>

         <section>
           <Test2 />
          </section>

          <section>
            <Hin />
           </section>
           
           <section>

            </section>
  </template>

Controller:

<?php

namespace AppHttpControllers;

use AppModelsHin;
use IlluminateHttpRequest;
use InertiaInertia;

class HinController extends Controller
{
    public function index()
    {
        $hins = Hin::get();

        return Inertia::render('Hin', [
            'hins' => $hins,
        ]);
    }
}


dd($hins); = IlluminateDatabaseEloquentCollection {#1502 ▼ // app/Http/Controllers/HinController.php:14 #items: array:130 [▶] #escapeWhenCastingToString: false }

Vue Dev-Tool: props hins:undefined

Console log: undefined

web.php:

Route::middleware(['auth'])->get('/hin', [HinController::class, 'index']);

Maybe I’ve made a thinking error here or missed something in the docs – can someone give me a nudge in the right direction?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I find a solution:

    Web.php

    Route::get('/dashboard', function () {
$hins = DB::table('hins')->get();
return Inertia::render('Dashboard',[
    'hins' => $hins
]);
})->middleware(['auth', 'verified'])->name('dashboard');

    Dashboard.vue:

    import Hin from "@/Components/Hin.vue";

const props = defineProps({hins: Array,});

<Hin :hins="hins"/>

    Thanks to everyone


  2. 0

    You state,

    Here 127.0.0.1:8000/hin I can see the table from my database. Here 127.0.0.1:8000/dashboard "No hins available." Console error "undefined" same as in Vue Dev-Tool: props hins:undefined. Hope this helps to find my problem?

    And this makes sense.

    • When your url has /hin, e.g., 127.0.0.1:8000/hin then you obtain the Hins.vue page via the Laravel router which calls the HinController.php index() method, and the data that is desired is neatly packaged in the controller is sent to the view:
    return Inertia::render('Hin', [
    'hins' => $hins,
]);
    • However, when you try to display Hins.vue within another Vue page, you are not getting the hins page directly from the Laravel router, and so the HinController is never accessed and its index() method never called, and so no data is sent into Hins.vue, no props, no nothing.

    One way to solve this is to obtain $hins = Hin::get(); in your dashboard controller, pass it into Dashboard.vue when rendering it (so that it is a prop of Dashboard) and then pass that prop into Hins.vue as a prop.

    e.g.,

    <script setup>
import { Head, Link } from "@inertiajs/vue3";
import Test1 from "./Test1.vue";
import Test2 from "./Test2.vue";
import Hin from "./Hin.vue";
import { ref } from "vue";

const props = defineProps({
  hins: Array,
});

</script>

<script>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";

export default {
    layout: AuthenticatedLayout,
};
</script>

<template>
    <Head title="Dashboard" />
        <section>
          <Test1 />
         </section>

         <section>
           <Test2 />
          </section>

          <section>
            <Hin :hins="hins"/>
           </section>
           
           <section>

            </section>
  </template>

    Other options for obtaining the data where needed include

    • Vue’s Provide / Inject.
    • If you need to use a bit of data throughout the entire application, then Inertia provides the HandleInertiaRequests middleware class for this. For details on this, check out Inertia’s Shared Data link.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search