Livewire如何在选择更改（wire：model）时$ emit事件

Question

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

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

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

如何观察此模型的变化？在VueJS中，我们只需设置$watch或$computed属性，我相信在livewire中也应该有类似的东西。奇怪的是为什么没有指令。

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

<?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;
    }
}

一定是漏掉了什么显而易见的东西。

- RomkaLTU

---

完全不起作用，尝试在任何地方放置$this->emit('hallChanged') ;D - RomkaLTU

当字段更改时，您是否进入了updatedHallId()方法？在该方法中添加dd（'Test'）;或类似内容。 - Qirel

其实并不需要 wire:change，因为您只需从组件中监听该属性的更新事件即可。 - Qirel

是的，它们位于dashboard.blade.php文件中的@livewire('show-reservation-form')和@livewire('show-reservations')。 - RomkaLTU

我遇到了一个类似的问题，也许我的问题和答案可以帮助你：https://stackoverflow.com/questions/64379725/how-can-i-create-dynamic-public-properties-and-data-via-a-parent-component-to-a/ - Daniel Tate

Answer 1

使用wire:change

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

然后在组件中

在ShowReservationForm.php文件中

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

那么你可以在 ShowReservations 组件上收听它，参考链接：https://laravel-livewire.com/docs/2.x/events

在 ShowReservations.php 中实现

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

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

- Kamlesh Paul

---

我其实不想使用JS，那会很尴尬。而且我使用的是livewire的第二个版本。 - RomkaLTU

顺便问一下，你在 showTable 中做了什么？你可以直接使用 @if(!empty($hall_id)) table @endif。 - Kamlesh Paul

那个表格位于另一个组件中，初始状态为false，而且我正在使用简单的@if语句。所以我想要做的是将$showTable属性更改为true。 - RomkaLTU

Answer 2

接收事件时，属性值不能是布尔值？

这样是行不通的：

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

这将起作用。

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

- RomkaLTU

Answer 3

如果代码无法正常工作，请检查您选择器的任何[例如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')

- Igor