Циклы Foreach в Alpine.js из раскрывающегося списка

У меня есть цикл выбора опций, и я хотел попробовать alpinejs. Если пользователь выберет определенную опцию, появится определенный DIV.

Вот мой выбор

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

laravel laravel-livewire alpine.js
person PendejoTrax    schedule 27.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, проблема в смешении livewire и alpine. Контекст не ясен из вашего вопроса, но этого можно добиться несколькими способами:

Чистый livewire:

<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, вы можете «запутать» его с помощью свойства 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>
person Mark Salmon    schedule 27.02.2021
comment
Спасибо. Второй ответил на мой вопрос. Спасибо - person PendejoTrax; 28.02.2021