在 Inertia.js 中， 的 selected 属性无法生效，因为 v-model 会接管表单控件的状态；正确做法是直接初始化 useForm 的初始值，使其与预期默认选项 ID 一致。
在 inertia.js 中，`
在使用 Inertia.js 构建表单时，一个常见误区是试图通过 HTML 的 selected 属性（如 <option selected></option>）来设定下拉菜单的默认选中项。但需明确：当元素绑定了 v-model 时，Vue 会完全控制该控件的值，原生 selected 属性将被忽略。你的代码中虽为每个 <option></option> 添加了 selected，但由于 v-model="productForm.category_id" 始终绑定到 null（见 useForm 初始化），最终渲染时没有任何选项被真正选中。
✅ 正确解决方案：在 useForm 初始化时，将 category_id 设为期望的默认值（例如最新分类的 ID），而非依赖 HTML 属性。
首先，在 Laravel 后端返回数据时，可同时提供“默认选中项”：
// web.php 或控制器中
$categories = auth()->user()
? Category::where('user_id', auth()->user()->id)
->orderByDesc('created_at')
->get()
: collect();
$defaultCategoryId = $categories->isNotEmpty() ? $categories->first()->id : null;
return Inertia::render('Products/Create', [
'categories' => $categories,
'defaultCategoryId' => $defaultCategoryId, // 显式传递默认 ID
]);然后在前端组件中，将该 ID 用于 useForm 初始化：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
<script setup>
import { useForm } from '@inertiajs/vue3'
const props = defineProps({
categories: Array,
defaultCategoryId: { type: [Number, String, null], default: null }
})
const productForm = useForm('createProduct', {
category_id: defaultCategoryId ?? null, // ✅ 关键：初始化为真实 ID
categName: null,
title: null,
price: null,
type: null,
currency: null,
desc: null,
qty: null,
thumbnail: null,
})
</script>模板中保持简洁、语义清晰的写法（移除无效的 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 value="">— 请选择分类 —</option>
<option
v-for="category in categories"
:key="category.id"
:value="category.id"
>
{{ category.name }}
</option>
</select>⚠️ 注意事项：
- 不要混用
v-model和原生selected/value控制逻辑，否则会导致状态不一致； - 若默认值需动态计算（如“最新创建”），务必在服务端完成排序与取值，避免前端依赖 DOM 渲染顺序（不可靠且非响应式）；
- 使用空选项（
value=""）提升用户体验，并确保category_id初始值能与之匹配（如null或''）； - 如需后续根据其他字段联动更新默认值（例如切换用户后重置分类），可通过
productForm.reset()配合新defaultCategoryId实现。
总结：Inertia.js 表单的默认值应由 useForm 的初始状态统一管理，这是响应式、可预测且符合 Vue 最佳实践的方式。把“选中逻辑”从模板移至数据层，才能真正掌控表单行为。
