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

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?

laravelvue.jsinertiajs


Solution 1:[1]

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

Solution 2:[2]

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

(users, not $users)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Prudhvi Mallavarapu
Solution 2 Daniel Storey

Related Questions