坚持 javascript 与 Laravel 9 和 Livewire 2 一起更改

Question

我有两个 select 选项字段——一个 ID 为 determined，另一个 vehicle_type。确定有 4 个选项--其中 2 个应该禁用 vehicle_type select 字段中的选项。在控制台中，我看到添加了 disabled 属性，但由于 Livewire，该属性立即被删除。有什么方法可以保留我的更改并强制 Livewire 不向服务器发送更新？

<select wire:model="determined" id="determined"
        name="determined">
    <option selected value>Please Select</option>
    <option value="0">Published HP Figure (DIN)</option>
    <option value="1">Measured with Dynojet+Dyno</option>
    <option value="2">Measured with Mustang Dyno</option>
    <option value="3">Measured with Engine Dynamometer Cell</option>
</select>

<select wire:model="vehicle_type" id="vehicle_type"
        name="vehicle_type">
    <option selected value>Please Select</option>
    <option value="0">Stick shift and 2WD vehicle</option>
    <option value="1">Automatic or 4WD Drive</option>
</select>

@push('scripts')
    $(document).ready(function() {
      $('#determined').on("change", function() {
        const dis = $(this).val() == 0 || $(this).val() == 3;
        $("#vehicle_type option").prop("disabled",dis)
      });
    });
@endpush

Answer 1

在 wire:model 上使用 .defer 以防止 Livewire 立即发出 ajax 请求并 re-render 组件。

<select wire:model.defer="determined" id="determined" name="determined">
    <option selected value>Please Select</option>
    <option value="0">Published HP Figure (DIN)</option>
    <option value="1">Measured with Dynojet+Dyno</option>
    <option value="2">Measured with Mustang Dyno</option>
    <option value="3">Measured with Engine Dynamometer Cell</option>
</select>

坚持 javascript 与 Laravel 9 和 Livewire 2 一起更改

Persist javascript changes alongside Laravel 9 and Livewire 2

laravel

laravel-livewire