Laravel结合SPLADE实现动态级联分类选择：如何传递分类ID给API

你的问题出在remote-url的变量绑定方式上，Splade有两种正确的写法来获取表单的category_id：

方法1：Blade字符串插值 #

直接在Blade模板中使用表单字段取值，同时加上watch-value监听主分类变化，自动触发接口请求：

<x-splade-select :options="$categories" label="Category" name="category_id" />
<x-splade-select 
    :options="$subcategories" 
    label="Sub-category" 
    name="subcategory_id" 
    remote-url="/getSubcategories/{{ $form->category_id }}" 
    watch-value="category_id"
/>

方法2：Vue响应式绑定 #

给remote-url加上冒号，让它成为Vue的动态绑定，用模板字符串语法获取表单值：

<x-splade-select :options="$categories" label="Category" name="category_id" />
<x-splade-select 
    :options="$subcategories" 
    label="Sub-category" 
    name="subcategory_id" 
    :remote-url="`/getSubcategories/${form.category_id}`"
    watch-value="category_id"
/>

额外注意事项 #

1. 路由要正确定义，确保能接收category_id参数：

// routes/web.php
Route::get('/getSubcategories/{category_id}', [CategoryController::class, 'getSubcategories']);

2. 控制器接口要返回JSON格式的子分类数据：

public function getSubcategories($category_id)
{
    $subcategories = Category::where('parent_id', $category_id)->pluck('name', 'id');
    return response()->json($subcategories);
}

3. 初始加载时，建议把$subcategories设为空集合，避免初始显示异常：

// 控制器代码
$categories = Category::whereNull('parent_id')->orderBy('name')->pluck('name', 'id');
$subcategories = collect();

内容的提问来源于stack exchange，提问作者Kal-El