Livewire 魔术动作不起作用 Uncaught ReferenceError: $event is not defined答案

【问题标题】：Livewire magic actions not working Uncaught ReferenceError: $event is not definedLivewire 魔术动作不起作用 Uncaught ReferenceError: $event is not defined
【发布时间】：2021-09-18 23:14:42
【问题描述】：

<div class="row">
    <div class="col">
        <div class="container">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <div class="mb-5">
                                <label class="form-label">Order: </label>
                                <select wire:change="selectOrder($event.target.value)">
                                    @foreach($orders as $option)
                                        <option value="{{$option['id']}}">{{$option['id']}}</option>
                                    @endforeach
                                </select>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

public function selectOrder($order)
{
    $this->order = $order;
    $this->products = $this->order->products;
}

这是一个火线组件，在更改选择时我需要一个选择输入，函数 selectOrder 使用所选值执行，我使用 $event 魔术动作，但出现以下错误。

【问题讨论】：

您发布了资产吗？并包含 livewire 样式和脚本标签？
是的，我确定了这一点，@KaleemShoukat
将组件包装在 div 中，然后重试
@KaleemShoukat 我用完整的代码编辑了这个问题
您使用的是哪个浏览器？这可能是浏览器的问题，但我不确定。请尝试使用其他浏览器。

标签： laravel events laravel-livewire alpine.js

【解决方案1】：

$event 是 Alpine.js 的神奇属性。所以解决它的一种方法是使用调用 Livewire 方法的 Alpine.js 事件监听器。

<select x-on:change="$wire.selectOrder($event.target.value)">

也就是说，您可以使用 Livewire 类中的属性，并将选择绑定到模型，

<select wire:model="orderValue">

然后在组件中监听那个变化。

public $orderValue;

// ...

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

【讨论】：

这工作得很好但是我的代码有什么问题我只是想不通@Qirel
就像我说的，$event 不是 Livewire，而是 Alpine.js 的魔法属性。它只能在 Alpine.js 监听器中使用。