Laravel Livewire:在选择输入的更改上传递选项值

Posted

技术标签:

【中文标题】Laravel Livewire:在选择输入的更改上传递选项值【英文标题】:Laravel Livewire: Passing option value onChange of Select input 【发布时间】:2021-08-18 13:34:02 【问题描述】:

我正在尝试将我的<select> 输入的<option> 中的一个值传递给我的livewire 控制器组件并回显该值。

Livewire 刀片视图组件:

!! Form::select('goals',$goals_plucked,null,[
    'placeholder' => trans('classes.backend.forms.select_goals'),
    'class' => 'custom-select',
    'id' => 'goals',
    'wire:change' => "goals(this.val)",
]) !!

这让我在我的 Livewire 控制器组件中得到一个 null 的输出

Livewire 控制器组件

public $goals;

public function goals($goals)

    dd($goals);

看了一些教程之后。我还尝试使用'wire:change' => "goals($event.target.value)",,这给了我一个未定义变量 $event 的错误,显然是因为它没有在主控制器中定义。我不确定我在这里做错了什么。

我正在尝试做的事情: 尝试创建一个流程,就像选择国家然后选择州然后选择城市一样。通过livewire。在选择国家之前,所选州和城市的输入将不可见

【问题讨论】:

【参考方案1】:

只需在前端给出 wire:model="variable_name" 即可选择。

在 livewire 控制器中应该有一个同名的公共变量。它会在选择值更改时自动获取值。

下面是相同的例子

 <select class="custom-select border-0 shadow-none" id="enquiry_for" wire:model="enquiry_for">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
 </select>

【讨论】:

我尝试了'wire:model' =&gt; "goals", & 'wire:model' =&gt; $goals,,但什么也没发生也尝试放置'wire:model' =&gt; "$goals",,这给了我一个错误Property [$] not found on component 是 livewire 视图中的选择吗? 'wire:model' => “目标”。如果您收到带有 $ 的错误,则表示绑定正在工作。所以,你需要写正确的语法 attr @HardikSisodia 你在用单引号写wire:model。如果是,请将其删除。 它是wire:model="goal"。你有wire:model =&gt; 'goal'。它是model = property 而不是model =&gt; property。我搞砸了很多次。【参考方案2】:

我尝试了下面的代码,它对我很有效。只需要确保我使用普通的 html 表单输入并通过 foreach 循环动态添加选项。还使用mount() 函数获取选择下拉列表的值和ID。

Livewire 刀片视图组件:

<select wire:model="goal" name="goal" class="form-control" required>
    <option value="">
        !! trans('classes.backend.forms.select_goals') !!
    </option>
    @foreach ($goals as $goal)
        <option value=" $goal->id "> $goal->goals </option>
    @endforeach
</select>

Livewire 控制器组件

public $goals;
public $goal;

public function mount()

    $this->goals = Goals::all()->isActive();


public function updatedGoal($value)

    dd($value);

【讨论】:

以上是关于Laravel Livewire:在选择输入的更改上传递选项值的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Livewire - 选择后选择输入数据丢失

Laravel Livewire 绑定模型 Carbon 属性

Laravel 和 Livewire:组件更改时如何执行 javascript 函数?

Laravel 和 Livewire 在单击时更改按钮样式

Laravel livewire 渲染后引导选择不起作用

Laravel(Livewire)中的组件拆分和保留参数