如何将数组数据从 Laravel Inertia Js 渲染方法传递到 Vue 3 中父组件的子组件？

Question

我有用户的数组数据并通过惯性渲染方法将其从路由渲染到 Dashboard.vue 组件，我无法将用户数据从 Dashboard.vue 组件传递到 Users.vue 组件.

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

Dashbaord.vue 父组件

<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 子组件

<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>

谁能建议我如何在 Vue js 中将数组数据从一个组件传递到另一个组件？

Answer 1

您在 parent 中尝试过 <Users title="Hello world" :users="{{ users }}"></Users> 吗？

(users, 不是 $users)

Answer 2

:users="$page['props']['users']" 有效。

如何将数组数据从 Laravel Inertia Js 渲染方法传递到 Vue 3 中父组件的子组件？

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

inertiajs

laravel

vue.js