0

I’m using Laravel 10 with Inertia.js and Vue 3.
In my controller, I return a page like this:

use Inertia\Inertia;
use App\Models\User;

public function dashboard() {
    $users = User::all();
    return Inertia::render('Dashboard', [
        'users' => $users
    ]);
}

In my Dashboard.vue component, I try to show the users:

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    users: Array
  }
}
</script>

The problem is that the list is always empty, even though dd($users) in the controller shows the correct data.

I checked that the users prop exists in the component using console.log(this.users) and it returns undefined.
I expected to see the list of user names rendered in the <li> elements.
I also tried passing users: $users->toArray() in the controller, but the problem persists.
How can I correctly pass data from Laravel with Inertia to my Vue component?

1
  • 1
    show the routes, is teh Dasboard.vue at the top of the pages folder? Commented Oct 5 at 12:24

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.