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

Posted 2023-02-22

【中文标题】Livewire 如何在选择更改时 $emit 事件 (wire:model)

【英文标题】：Livewire how to $emit event on select change (wire:model)

【发布时间】：2021-01-20 00:19:42

【问题描述】：

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

我需要在简单的<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;
    

必须遗漏一些明显的东西。

【问题讨论】：

根本不起作用，尝试将$this->emit('hallChanged') 放在任何地方；D

更改字段时是否输入updatedHallId()方法？在该方法中添加dd('Test'); 或类似名称。

实际上不需要wire:change，因为您只需从组件中侦听该属性的更新事件。

dd() in updatedHallId 确实有效，但这部分没有接缝： $this->emit('hallChanged', $value);或者 $listeners 可能有问题

两个组件都在同一个页面上？它们不能向其他用户或其他页面发出事件。您需要为此进行广播。

【参考方案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;

【讨论】：

我其实不想用JS，会很别扭。我使用的是 livewire 的第 2 版。

顺便问一下你在用showTable做什么？你可以直接做@if(!empty($hall_id)) table @endif

该表处于另一个组件蚂蚁初始状态为假，是的，我正在做简单的@if 语句。所以我要做的就是将 $showTable 属性更改为 true。

【参考方案2】：

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

这不起作用：

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

这会起作用

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