Livewire 3.4中如何获取select输入框的值？技术求助

问题核心 #

你的代码存在两个关键问题：DOM语法错误导致Livewire无法正常解析组件，以及缺少触发组件方法的事件绑定，进而无法正确获取选中值。

修正方案 #

1. 修复Blade组件的DOM语法错误

你的blade文件末尾的</div缺少闭合符号>，这会破坏DOM结构，直接影响Livewire的交互逻辑。

修正后的dynamicselect.blade.php：

<div style="text-align: center">
    <select wire:model="selectedValue" wire:change="updateSelectedValue">
        <option value="1">Opção 1</option>
        <option value="2">Opção 2</option>
        <option value="3">Opção 3</option>
        <option value="4">Opção 4</option>
        <option value="5">Opção 5</option>
        <option value="6">Opção 6</option>
        <option value="7">Opção 7</option>
        <option value="8">Opção 8</option>
        <option value="9">Opção 9</option>
        <option value="10">Opção 10</option>
    </select>
    O valor selecionado é {{ $selectedValue }}
</div>

2. 绑定事件触发方法

给select标签添加wire:change="updateSelectedValue"，这样每次选中值变化时，会自动调用组件的updateSelectedValue方法。如果需要手动触发（比如通过按钮），可以添加以下代码：

<button wire:click="updateSelectedValue">查看选中值</button>

3. 可选：初始化默认值

为避免初始状态下$selectedValue为null，可在组件类中设置默认值：

class DynamicSelect extends Component
{
    public $selectedValue = ''; // 也可设置默认选中值，比如'1'

    public function updateSelectedValue()
    {
        dd($this->selectedValue);
    }

    public function render()
    {
        return view('livewire.dynamicselect');
    }
}

4. 确认组件正确挂载

在父视图中确保用kebab-case格式引入组件：

<livewire:dynamic-select />

关键说明 #

• Livewire 3中wire:model默认是defer模式，若需实时同步可改用wire:model.live，但配合wire:change事件已能满足值变化时立即触发方法的需求。
• 务必确保页面中已正确引入Livewire的JS脚本（通常通过@livewireScripts指令），这是组件正常交互的基础。

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