[FIXED] How to pass array data from Laravel Inertia Js render method to child component from parent component in Vue 3?

Issue

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?

Solution

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

Answered By - Prudhvi Mallavarapu

Answer Checked By - Clifford M. (PHPFixing Volunteer)