Livewire 如何在 select 更改时 $emit 事件 (wire:model)

Question

Livewire 如何在 <select> 更改时 $emit 事件 (wire:model)

我需要在简单的 <select> 更改时触发事件（从另一个组件中的数据库获取一些数据）。

<select id="hall" wire:model="hall_id">...</select>

如何查看此模型的变化？在 VueJS 上我们只是设置 $watch 或 $computed 属性，我相信 livewire 应该是类似的东西。很奇怪为什么没有wire:change指令。

这就是我现在尝试发出事件的方式：

<?php

namespace App\Http\Livewire;

use App\Models\Event;
use App\Models\Hall;
use Livewire\Component;

class ShowReservationForm extends Component
{
    public $hall_id = '';

    protected $queryString = [
        'hall_id' => ['except' => ''],
    ];

    public function mounted()
    {
        //
    }

    public function updatedHallId($name, $value)
    {
        $this->emit('hallChanged', $value);
    }

    public function render()
    {
        return view('livewire.show-reservation-form', [
            'halls' => Hall::all(),
        ]);
    }

    public function getHallEventsProperty()
    {
        return Event::where('hall_id', $this->hall_id)->get();
    }
}

并抓住它：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ShowReservations extends Component
{
    protected $listeners = ['hallChanged'];

    public $showTable = false;

    public function render()
    {
        return view('livewire.show-reservations');
    }

    public function hallChanged()
    {
        $this->showTable = true;
    }
}

一定是遗漏了一些明显的东西。

Answer 1

使用wire:change

<select id="hall" wire:model="hall_id" wire:change="change">...</select>

然后在组件

在ShowReservationForm.php

public function change()
{
     $this->emit('hallChanged'); 
}

然后你可以在 ShowReservations component ref link https://laravel-livewire.com/docs/2.x/events

上收听

在ShowReservations.php

 protected $listeners = ['hallChanged' => 'change'];

public function change()
{
   $this->showTable = true;
}

Answer 2

原来接收事件的时候，属性值一定不能是bool？

这行不通：

public $showTable = false;
...
public function hallChanged()
    {
        $this->showTable = true;
    }

这会起作用

public $showTable = 0;
...
public function hallChanged()
    {
        $this->showTable = 1;
    }

Answer 3

如果代码不起作用，请查看 select 的任何 [例如 jQuery] 句柄，也许它由 select2 脚本左右处理，如果是 - LiveWire 将无法从头开始工作。正确的最小代码是：

/resources/views/livewire/your-livewire-component.blade.php

<select wire:model="country">
    @foreach($items as $code => $country)
        <option value="{{ $code }}">{{ $country }}</option>
    @endforeach
</select>

/app/Http/Livewire/YourLivewireComponent.php

<?php
namespace App\Http\Livewire;
use Illuminate\Support\Facades\Log;
use Livewire\Component;
class YourLivewireComponent extends Component
{
    public $items;
    public $country; //necessary!
    public function mount($items)
    {
        $this->items = $items;
    }

    public function render()
    {
        return view('livewire.your-livewire-component', [
            'items' => ['ES' => 'Spain', 'FI' => 'Finland']
        ]);
    }

    public function updatedCountry($value)
    {
        Log::info('value='.print_r($value, 1));
    }
}

/resources/views/somelaraveltemplate.blade.php

<p>some HTML code</p>
@livewire('your-liveweire-component')

Livewire 如何在 select 更改时 $emit 事件 (wire:model)

Livewire how to $emit event on select change (wire:model)

laravel

laravel-livewire