Foreach 在 select 下拉列表中的 Alpine.js 中循环

Question

我有一个 select 选项循环，想试试 alpinejs。如果用户 select 选择某个选项，则会显示某个 DIV。

这是我的 select

<div class="mt-4"> 
<select required wire:model.defer="task_id" />
   <option value=""> Select a Task </option>
            @foreach($tasktypes as $task)
            <option value="{{$task->id}}"> {{$task->name}}</option>
            @endforeach                     
</select>
</div>

所以如果任务->id == 1

下面应该会出现一个新的 <div> id 1 should appear here </div>。

我在下面尝试过，但没有成功。我刚刚开始 TALL Stack

<div class="mt-4" x-data="$wire.tasktypes->id : false"> 
<select required wire:model.defer="task_id" />
   <option value=""> Select a Task </option>
            @foreach($tasktypes as $task)
            <option @click="$wire.task->id = true" value="{{$task->id}}"> {{$task->name}}</option>
            @endforeach                     
</select>
    
     <div x-show="$wire.task->id"> some text here </div>
</div>

Answer 1

我认为问题出在 livewire 和 alpine 之间的混合。您的问题的上下文不清楚，但可以通过多种方式实现：

纯火线：

<div class="mt-4"> 
    <select required wire:model.defer="task_id" />
        <option value=""> Select a Task </option>
        @foreach($tasktypes as $task)
            <option value="{{$task->id}}"> {{$task->name}}</option>
        @endforeach                     
    </select>

    @if($task_id)
        <div> id {{ $task_id }} should appear here </div>
    @endif
</div>

或者，如果您希望它成为 Alpine JS，您可以 'entangle' 使用 livewire 属性:

<div class="mt-4" x-data="{ taskId: @entangle('task_id') }"> 
    <select required wire:model.defer="task_id" />
        <option value=""> Select a Task </option>
        @foreach($tasktypes as $task)
            <option value="{{$task->id}}"> {{$task->name}}</option>
        @endforeach                     
    </select>


    <div x-show="taskId" x-html="` id ${taskId} should appear here `"></div>
</div>

Foreach 在 select 下拉列表中的 Alpine.js 中循环

Foreach loops in Alpine.js from select dropdown

laravel

laravel-livewire

alpine.js