Vue3+InertiaJs+Laravel9中如何初始化子类别下拉框

技术栈 #

• 前端：Vue.js 3
• 服务端渲染：Inertia.js
• 后端：Laravel 9

需求与问题 #

页面已声明3个props：categories、subcategories、product。布局上category和subcategory使用下拉框，其余字段为文本框。需实现两个功能：

1. 打开产品编辑页时，从product prop中获取产品对应的子分类，在Subcategory下拉框中选中（未实现）
2. 切换category时加载对应子分类（已通过Inertia局部刷新实现）

当前问题出在Vue表单的subcategory_id赋值处，导致初始化时无法显示产品对应的子分类。

现有代码 #

Vue.js 代码 #

<script setup>
const props = defineProps({
  errors: Object,
  categories: Object,
  subcategories: Object,
  product: Object,
})

const form = useForm({
    category_id: props.product[0].category.id,
    subcategory_id: props.subcategories,  // 问题所在：错误赋值了整个子分类数组
    product_id: props.product[0].id,
    name: props.product[0].name,
    price: props.product[0].price,
    discount: props.product[0].discount,
});

let getSubcategory = (event) => { 
    if(event.target.value !== "") {
       Inertia.visit(
            route('edit.product', { 
                product_id: form.product_id,
                category_id: event.target.value 
            }),{ 
                only: ['subcategories'],
                preserveState: true,
                preserveScroll: true,
            }
        );
    }
}

const submit = () => {
    form.put(route('update.product'), {
        onFinish: () => form.reset(),
    });
};
</script>

Laravel 控制器方法 #

public function edit(Product $product, $product_id, $category_id = null)
{     
    return Inertia::render('Product/Edit', [        
        'categories' => Category::has('subcategories')->get(['id', 'name']),           
        'product' => Product::with('category:id,name')
                            ->with('subcategory:id,name')
                            ->where('id', '=', $product_id)
                            ->get()->toArray(),  
        'subcategories' => Inertia::lazy(fn () =>              
                            Subcategory::with('category')
                                        ->where('category_id', '=', $category_id)
                                        ->get())            
    ]);            
}

解决方案 #

1. 修正Vue表单subcategory_id初始化值 #

将subcategory_id从赋值props.subcategories改为从product的关联子分类中取id，同时用可选链避免空值报错：

const form = useForm({
    category_id: props.product[0].category.id,
    subcategory_id: props.product[0].subcategory?.id || '', // 修正此处
    product_id: props.product[0].id,
    name: props.product[0].name,
    price: props.product[0].price,
    discount: props.product[0].discount,
});

2. 调整Laravel控制器逻辑 #

首次进入页面时没有category_id参数，此时需要用产品自身的category_id加载对应子分类，确保初始化时subcategories有正确的选项：

public function edit(Product $product, $product_id, $category_id = null)
{
    // 先获取产品详情（包含关联的分类和子分类）
    $productData = Product::with('category:id,name')
                          ->with('subcategory:id,name')
                          ->where('id', '=', $product_id)
                          ->first();

    // 优先使用传入的category_id，否则用产品自身的category_id
    $targetCategoryId = $category_id ?? $productData->category_id;

    return Inertia::render('Product/Edit', [        
        'categories' => Category::has('subcategories')->get(['id', 'name']),           
        'product' => [$productData->toArray()], // 保持原数组格式
        'subcategories' => Inertia::lazy(fn () =>              
                            Subcategory::with('category')
                                        ->where('category_id', '=', $targetCategoryId)
                                        ->get())            
    ]);            
}

说明 #

• Vue端：初始化时直接绑定产品的子分类ID，确保下拉框能正确选中对应选项
• 后端：处理无category_id的场景，确保首次加载时能拿到产品所属分类的子分类列表，下拉框有可选项

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