如何使用InertiaJS从控制器返回数据到Vue组件

你的写法有三个核心错误：

• 给Inertia::render传参格式错误：第二个参数要求是键值对格式的props数组，你传入的[ProductController::class, 'index']是路由绑定控制器方法的专用格式，不会自动执行控制器方法取数据。
• 控制器返回逻辑错误：ProductController@index直接返回Eloquent集合的写法仅适用于API接口响应，Inertia请求需要把数据作为组件props传入渲染方法。
• Vue组件props声明错误：props没有写在组件导出的配置对象内，且props名和后端传入的键名不匹配。

1. 修正路由定义 #

路由直接指向控制器方法，不要在闭包中调用Inertia渲染：

// routes/web.php
use App\Http\Controllers\ProductController;
use Illuminate\Support\Facades\Route;

Route::get('/', [ProductController::class, 'index']);

2. 修正控制器逻辑 #

在控制器方法中查询数据，通过Inertia::render将数据绑定到Vue组件的props上：

// app/Http/Controllers/ProductController.php
namespace App\Http\Controllers;

use App\Models\Product;
use Inertia\Inertia;

class ProductController extends Controller
{
    public function index()
    {
        return Inertia::render('App', [
            // 键名products就是前端接收的props名，可自定义
            'products' => Product::all()
        ]);
    }
}

3. 修正Vue组件写法 #

根据你用的Vue API风格选对应的写法，保证props名和后端传入的键名完全一致：

选项式API写法 #

<template>
  <!-- 示例：遍历渲染产品列表 -->
  <div v-for="product in products" :key="product.id">
    {{ product.name }}
  </div>
</template>

<script>
export default {
  props: {
    // 和后端传入的键名保持一致
    products: Array,
  },
}
</script>

Vue3 <script setup>写法 #

<template>
  <div v-for="product in products" :key="product.id">
    {{ product.name }}
  </div>
</template>

<script setup>
defineProps({
  products: Array,
})
</script>

如果你确实需要在路由闭包中直接渲染（不推荐，不利于代码分层），可以直接在闭包中查询数据传入：

Route::get('/', function () {
    return Inertia::render('App', [
        'products' => \App\Models\Product::all()
    ]);
});

内容的提问来源于stack exchange，提问作者Mishen Thakshana