How to pass array data from Laravel Inertia Js render method to child component from parent componen-CodePudding

I'm having users' array data and rendering this from route to Dashboard.vue component through inertia render method, where I'm unable to pass users data from Dashboard.vue component to Users.vue component.

Route::get('/dashboard', function () {
        $users = User::all();
        return Inertia::render('Dashboard', ['users' => $users]);
    })->name('dashboard');

Dashbaord.vue parent component

<Users title="Hello world" users="{{ $users }}"></Users> //this one passing {{ $users }} as string data in props.

<Users title="Hello world" :users="{{ $users }}"></Users> //this one getting syntax error.

Users.vue child component

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

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

Can anyone suggest to me how to pass array data from one component to another component in Vue js?

CodePudding user response：

Have you tried <Users title="Hello world" :users="{{ users }}"></Users> in the parent?

(users, not $users)

CodePudding user response：

:users="$page['props']['users']" worked.