在 Livewire Competent re-renders 时更新 Alpinejs 绑定

Question

我有一个 livewire 表格，user-selected 日期然后通过 select 选项框显示该日期的可用时间段。

因此，当用户 select 添加到购物车时，我只需要传递时间段的 ID。我正在尝试减少 ajax 调用，因此我只想使用 AlphineJS 绑定。

我的 livewire blade 代码。

<div class="col-span-6" x-data="{ selectedSession: $el.querySelector('option').value }">
        <label for="session" class="block text-sm text-gray-700 font-semibold">Select Time</label>
        <select id="session" x-model="selectedSession" name="session">
           @foreach ($sessionsForDay as $session)
             <option :value="{{ $session->id }}" value="{{ $session->id }}"  @if ($loop->first) Selected @endif>
                {{ $session->name() }} - 
             </option>
           @endforeach
        </select>
        <p x-text="selectedSession"></p>
    </div>

页面加载时一切正常。 x-data 正在获取当前 selected（第一个）值，但是当 livewire 更新 $sessionsForDay 和 re-renders 选项字段时，AlpineJS 不会更新 ID 并将显示旧 ID。如果我再 select 一个新的时间它就会更新。

我知道 livewire 有一个 JS 钩子，但我觉得这不是处理如此简单的事情的最佳方式。

Answer 1

由于您使用的是 Livewire，我不会担心您的 ajax 来电。 Livewire 处理得很好。

无论如何，Livewire 如何更新 $sessionForDay？没有直接绑定到它，因为您使用的是 Alpine 的 x-model 而不是 Livewire 的 wire:model。如果您一直在使用完整的 Livewire 代码，我会建议 @entangle.

由于您使用的是 Alpine，因此您的代码可以正常工作。 Alpine 有一个针对 select 的 onchange，并将根据 selected 选项更新 x-model 值。您不需要 option 标签上的 :value 属性，也不需要 select 或 x-data 标签上的

<div class="col-span-6" x-data="{ selectedSession: '{{$sessionsForDay->first()->id}}' }">
    <label for="session" class="block text-sm text-gray-700 font-semibold">Select Time</label>
    <select id="session" x-model="selectedSession" name="session">
       @foreach ($sessionsForDay as $session)
         <option value="{{ $session->id }}"  @if ($loop->first) selected @endif>
            {{ $session->name() }} - 
         </option>
       @endforeach
    </select>
    <p x-text="selectedSession"></p>
</div>

在 Livewire Competent re-renders 时更新 Alpinejs 绑定

update Alpinejs binding when Livewire Competent re-renders

javascript

laravel

laravel-livewire