People searching “PHP enum select Vue” dump PostStatus::cases() into Inertia and then the select posts the wrong string. A backed enum has a value and a name. Store the value.
TL;DR
- Send enum cases as value and label props.
- Validate the posted string with Rule::enum.
- Do not pass
PostStatus::cases()straight through. - Do not validate with
in:Draft,Publishedif the column storesdraftandpublished.
The fix#
php
enum PostStatus: string
{
case Draft = 'draft';
case Published = 'published';
}php
use Illuminate\Validation\Rule;
return Inertia::render('posts/Create', [
'statuses' => array_map(
fn (PostStatus $status) => ['value' => $status->value, 'label' => $status->name],
PostStatus::cases(),
),
]);vue
<select v-model="form.status" name="status">
<option v-for="status in statuses" :key="status.value" :value="status.value">
{{ status.label }}
</option>
</select>php
'status' => ['required', Rule::enum(PostStatus::class)],What to avoid#
Gotcha
Do not pass PostStatus::cases() straight through. The page then has to know PHP’s enum JSON shape. Do not validate with in:Draft,Published if the column stores draft and published.
FAQ#
How do I fill a Vue select from a PHP enum?
Send enum cases as value and label props. Validate the posted string with Rule::enum.
What goes wrong with PHP enum select Vue?
Many developers dump PostStatus::cases() into Inertia and then the select posts the wrong string. Do not pass PostStatus::cases() straight through.
