Javascript 当Livewire重新呈现时更新Alpinejs绑定

我有一个livewire表单，用户选择日期，然后通过选择选项框显示该日期的可用时间段

因此，当用户选择AddtoCart时，我只需要越过时间段的id。我试图减少ajax调用，因此我只想使用AlphineJS绑定

我的livewire刀片代码。

<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>

选择时间
@foreach（$sessionsForDay作为$session）
首先）选择@endif>
{{$session->name（）}}-
@endforeach

页面加载时一切正常。x-data正在获取当前选定的（第一个）值，但当livewire更新$SessionForDay并重新呈现选项字段时，AlpineJS不会更新id，并将显示旧id。如果我选择新时间，它将随之更新

---

我知道livewire有一个JS钩子，但对于这么简单的事情，我觉得这不是最好的方式。

既然您使用的是livewire，我就不会担心您的ajax调用。Livewire处理它们非常好

无论如何，

$sessionForDay

是如何被Livewire更新的？它没有直接绑定，因为您使用的是Alpine的

x-model

，而不是Livewire的

wire:model

。如果您使用的是完整的Livewire代码，我会建议您

因为您使用的是Alpine，所以代码可以正常工作。Alpine对select具有onchange，并将根据所选选项更新x模型值。您不需要

选项

标记上的

：value

属性，也不需要

x-data

标记上的选择器

选择时间
@foreach（$sessionsForDay作为$session）
首先）选择@endif>
{{$session->name（）}}-
@endforeach

Thank you@Yinci，这与我的想法不完全一样，但你的方式是分配清洁剂并有效。我的大脑只是试图把它复杂化，是的，我正在使用livewire来处理ajax调用，$sessionForDay就是这样更新的。我在视图中已经有了会话ID，我不想再进行一次ajax调用，只是为了在按钮的href中获得该ID。这就是为什么我想在阿尔皮涅斯。