Laravel Livewire 3默认下拉选项值的验证问题

核心原因 #

Livewire的双向绑定wire:model是组件属性驱动视图，而非HTML属性驱动。你在HTML里设置的selected="selected"会被组件中hour_pick属性的初始值覆盖。如果组件中该属性未初始化（默认是null），Livewire会将select的选中状态重置为第一个选项，但组件内的属性值仍为null，导致提交时触发required验证错误。

解决方案 #

1. 在Livewire组件中初始化属性值
   在组件类中直接给hour_pick设置初始值为7，这样绑定后视图会自动选中对应选项，且属性值非空，满足验证要求：

   class YourComponent extends Component
   {
       public $hour_pick = 7; // 初始化默认值为7
   
       public function rules()
       {
           return [
               'hour_pick' => 'required',
           ];
       }
   
       // 其他方法（如save）...
   }
   

2. 移除HTML中的手动selected属性
   既然Livewire会根据组件属性自动设置选中状态，HTML里的selected="selected"可以删掉，避免冲突：

   <form wire:submit="save">
       <select wire:model="hour_pick" id="p_hr">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
           <option value="7">7</option> <!-- 去掉selected属性 -->
           <option value="8">8</option>
           <option value="9">9</option>
           <option value="10">10</option>
           <option value="11">11</option>
           <option value="12">12</option>
       </select>
   </form>
   

为什么手动选择其他选项正常？ #

当你手动选择其他选项时，Livewire会将选中的值同步到组件的hour_pick属性中，此时属性值非空，所以能通过required验证。而默认情况下组件属性未初始化，值为null，即使视图显示选中了第一个选项，组件内的实际值还是null，导致验证失败。

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