Laravel Livewire：在选择输入的更改上传递选项值答案

【问题标题】：Laravel Livewire: Passing option value onChange of Select inputLaravel Livewire：在选择输入的更改上传递选项值
【发布时间】：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。在选择国家之前，所选州和城市的输入将不可见

【问题讨论】：

标签： laravel laravel-8 laravel-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' => "goals", & 'wire:model' => $goals,，但什么也没发生也尝试放置'wire:model' => "$goals",，这给了我一个错误Property [$] not found on component
是 livewire 视图中的选择吗？
'wire:model' => “目标”。如果您收到带有 $ 的错误，则表示绑定正在工作。所以，你需要写正确的语法 attr
@HardikSisodia 你在用单引号写wire:model。如果是，请将其删除。
它是wire:model="goal"。你有wire:model => 'goal'。它是model = property 而不是model => 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);
}

【讨论】：