InertiaJS中select标签selected属性失效问题求助

核心问题分析 #

你用Vue的v-model绑定了productForm.category_id，此时<option>上的selected属性会被Vue完全忽略——Vue只认v-model的绑定值来控制选中状态。你当前category_id初始值为null，所以默认没有选中项。

解决方法 #

方式1：前端直接从分类数组取最新项ID初始化 #

因为后端已经通过orderByDesc('created_at')把最新分类放在数组首位，直接取第一个元素的ID即可：

const { categories } = usePage().props;

const productForm = useForm("createProduct", {
    category_id: categories.length > 0 ? categories[0].id : null,
    categName: null,
    title: null,
    price: null,
    type: null,
    currency: null,
    desc: null,
    qty: null,
    thumbnail: null,
});

同时删掉<option>上无效的selected属性：

<select
    name="category_id"
    id="category_id"
    class="min-w-max text-sm text-gray-900 bg-transparent border-2 rounded-xl"
    v-model="productForm.category_id"
>
    <option
        v-for="category in categories"
        :key="category.id"
        :value="category.id"
    >
        {{ category.name }}
    </option>
</select>

方式2：后端传递默认选中ID（适合需要单独查询的场景） #

在web.php中额外传递最新分类的ID：

'categories' => auth()->user() 
    ? Category::where('user_id', auth()->user()->id)->orderByDesc('created_at')->get()
    : [],
'default_category_id' => auth()->user()
    ? Category::where('user_id', auth()->user()->id)->orderByDesc('created_at')->value('id')
    : null,

前端初始化表单时使用该值：

const { default_category_id } = usePage().props;

const productForm = useForm("createProduct", {
    category_id: default_category_id ?? null,
    // 其他字段保持不变
    categName: null,
    title: null,
    price: null,
    type: null,
    currency: null,
    desc: null,
    qty: null,
    thumbnail: null,
});

InertiaJS下拉菜单更优实现方案 #

1. 封装可复用下拉组件 #

把下拉逻辑封装成独立组件，减少重复代码：

<!-- components/SelectDropdown.vue -->
<template>
    <select
        :name="name"
        :id="id"
        :class="className"
        v-model="modelValue"
        @change="$emit('update:modelValue', $event.target.value)"
    >
        <option v-if="placeholder" value="">{{ placeholder }}</option>
        <option
            v-for="option in options"
            :key="option.id"
            :value="option.id"
        >
            {{ option.name }}
        </option>
    </select>
</template>

<script setup>
defineProps({
    name: String,
    id: String,
    className: String,
    modelValue: [Number, String, null],
    options: Array,
    placeholder: {
        type: String,
        default: '请选择'
    }
});

defineEmits(['update:modelValue']);
</script>

使用示例：

<SelectDropdown
    name="category_id"
    id="category_id"
    className="min-w-max text-sm text-gray-900 bg-transparent border-2 rounded-xl"
    v-model="productForm.category_id"
    :options="categories"
    placeholder="选择分类"
/>

2. 处理空状态友好提示 #

当用户没有分类时，直接显示引导创建的内容：

<div v-if="categories.length === 0">
    <p class="text-gray-500 mb-2">暂无分类，先创建一个吧</p>
    <Link
        :href="route('categories.create')"
        class="text-blue-600 hover:underline"
    >
        创建分类
    </Link>
</div>
<SelectDropdown
    v-else
    name="category_id"
    id="category_id"
    className="min-w-max text-sm text-gray-900 bg-transparent border-2 rounded-xl"
    v-model="productForm.category_id"
    :options="categories"
/>

3. 全局共享分类数据 #

如果多个页面需要用到分类数据，用Inertia的Shared Data全局共享，避免重复查询：
在AppServiceProvider的boot方法中添加：

use Inertia\Inertia;

public function boot()
{
    Inertia::share([
        'categories' => function () {
            return auth()->check() 
                ? Category::where('user_id', auth()->id())->orderByDesc('created_at')->get(['id', 'name'])
                : [];
        },
    ]);
}

之后所有Inertia页面都能直接通过usePage().props.categories获取分类数据，无需在每个路由单独传递。

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