Laravel Livewire 基于下拉 Select 自动填充输入框

发布于07月09日

你好，我是Livewire的新手，我正在try 根据下拉值获得输入值. 当我 Select Example下拉值时，输入中的番茄显示其价格. 我使用jQuery实现了这一点，但我希望在没有jQuery的情况下在Livewire中操作它.

只有两个字段的单表.

id	vegetable_name	vegetable_price
1	tomato	1$
2	onion	2$

下拉式视图和输入

<div class="form-control-wrap">
 <select name="student_course" required>
   @foreach ($Itemlist as $key=>$Itemlists) 
     <option value="{{ $Itemlists->vegetable_name}}">
       {{ $Itemlists->vegetable_name}}
     </option>
   @endforeach
 </select>
</div>

我想让大家知道价格.

<input name="vegetable_price"><input>

我的控制器

public function render()
{
    $Itemlist= StoreItem::get();
    return view('livewire.Item_Form',compact('Itemlist'));
}

推荐答案

在您的livewire视图文件中添加livewire的wire:model属性，这样您的Blade 将如下所示.

<div class="form-control-wrap">
 <select name="student_course" required wire:model="vegetable">
   @foreach ($Itemlist as $key=>$Itemlists) 
     <option value="{{ $Itemlists->vegetable_name}}">
       {{ $Itemlists->vegetable_name}}
     </option>
   @endforeach
 </select>
</div>

<input name="vegetable_price" wire:model.defer="vegetable_price"><input>

在您的控制器中，您可以使用updated钩子来表示您的wire:model属性，还可以在livewire类的顶部声明您的两个属性，这样您的整个控制器就会如下所示.

public $vegetable;
public $vegetable_price;


public function render()
{
    $Itemlist= StoreItem::get();
    return view('livewire.Item_Form',compact('Itemlist'));
}

public function updatedVegetable()
{
    $vegetableInfo = DB::table('vegetables')->where('id', $this->vegetable)->firts();
    $this->vegetable_price = $vegetableInfo->vegetable_price;
}

我以为你们有名为vegetables的桌子