使用 Laravel 和 Live Wire 自动填充表单输入

Question

目标： 在 focusout 事件上我想自动填充 html 输入字段 #City #State（全名）#State2（缩写）
问题
1)如何将输入传递给函数？
2)我需要做什么来填充字段？

在资源中\ 浏览量：locale.blade.php

<div>
<input type="text" name="City" id="City" value="{{ $city }}">
<input type="text" name="State" id="State" value="{{ $state }}">
<input type="text" name="State2" id="State2" value="{{ $state2 }}">
<input type="text" name="Zip" id="Zip" value="{{ $zip }}"
       wire:focusout="setlocale">
</div>

在 App\Http\ LiveWire Locale.php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\State;
use Illuminate\Support\Arr;

class Locale extends Component
{
    public $zip = "";
    public $city = "";
    public $state = "";
    public $state2 = "";
    
    public function setlocale()

    {   
        $locale_arr=[];
        $g = $this->zip;
        dd($g);       ################## its only returning "" in my dd(); ###################
        $z = State::get()->where('zip',$g);
        $city = $z->city;
        $state = $z->state_name;
        $state2 = $z->state2_id;
        //TODO somehow render these variables in input fields.
        
    }
    public function render()
    {
        return view('livewire.locale');
    }
}

在App\Models\**州**

class State extends Model
{
    use HasFactory;

}

修补匠

>>> use App\Models\State
>>> $a = State::get()->where('zip','10001');
=> Illuminate\Database\Eloquent\Collection {#70820
     all: [
       2569 => App\Models\State {#35131
         id: 2570,
         zip: "10001",
         lat: 40.7506,
         lng: -73.9972,
         city: "New York",
         state_id: "NY",
         state_name: "New York",
         county_name: null,
         timezone: null,
       },
     ],
   }

Answer 1

使用 Livewire，您必须使用 wire:model 将输入绑定到 class 的属性。然后，Livewire 会将您的输入值设置为您在组件中拥有的值。

<div>
   <input type="text" name="City" id="City" wire:model="city" />
   <input type="text" name="State" id="State" wire:model="state" />
   <input type="text" name="State2" id="State2" wire:model="state2" />
   <input type="text" name="Zip" id="Zip" wire:model="zip" wire:focusout="setlocale" />
</div>

然后，我建议您在 PHP class 中使用生命周期挂钩，而不是使用 wire:focusout。因此，从您的 HTML 中删除 wire:focusout="setlocale"，并将以下内容添加到您的 PHP class、

public function updated($field, $value) 
{
    if ($field === 'zip') {
        $this->setlocale();
    }

}

public function setlocale()
{   
    $zip = State::where('zip', $this->zip)->first();
    $this->city = $zip->city;
    $this->state = $zip->state_name;
    $this->state2 = $zip->state2_id;
}

使用 Laravel 和 Live Wire 自动填充表单输入

Auto populate form inputs with Laravel and Live Wire

php

laravel

laravel-livewire