Laravel-如何根据选择的单选按钮有条件地显示输入选择框？

Question

我目前正在使用Livewire使用Laravel 8。表单中有两个输入选择框，我该如何有条件地显示这些基于选择的单选按钮的选择框。我想在没有jQuery的情况下实现结果，请帮助我。

这是我要实现的目标：

需要在这两个之间切换：

<div class="mb-2">
    <label for="category_id" class="block">Category ID</label>
    <select wire:model="category_id" name="category_id" id="category_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-blue-900">
        <option>Select Option</option>
        @foreach($categories as $category)
        <option value="{{ $category->id }}">{{ $category->category_name }}</option>
        @endforeach
        @error('category_id') <h1 class="text-red-500">{{$message}}</h1>@enderror
    </select>
</div>


<div class="mb-2">
    <label for="sub_category_id" class="block">Sub-Category ID</label>
    <select wire:model="sub_category_id" name="sub_category_id" id="sub_category_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-blue-900">
        <option>Select Option</option>
        @foreach($subcategories as $subcategory)
        <option value="{{ $subcategory->id }}">{{ $subcategory->sub_category_name }}</option>
        @endforeach
        @error('sub_category_id') <h1 class="text-red-500">{{$message}}</h1>@enderror
    </select>
</div>

Answer 1

我知道这已经有一段时间了，所以我会找到答案。

假设你的代码在上面，首先我们需要跟踪一些东西来设置这个状态。很棒的是我们可以使用来自 livewire 的变量。

在组件中定义一个变量 public $category_type = "";

现在将其绑定到单选按钮

<input wire:model="category_type" type="radio" value="category">
<input wire:model="category_type" type="radio" value="sub_category">

因此组件中的此项将在更改时更新，因此我们可以使用刀片指令来呈现所需的输入集

@if($category_type == "category")
<div class="mb-2">
    <label for="category_id" class="block">Category ID</label>
    <select wire:model="category_id" name="category_id" id="category_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-blue-900">
        <option>Select Option</option>
        @foreach($categories as $category)
        <option value="{{ $category->id }}">{{ $category->category_name }}</option>
        @endforeach
        @error('category_id') <h1 class="text-red-500">{{$message}}</h1>@enderror
    </select>
</div>
@elseif($category_type == "sub_category")
<div class="mb-2">
    <label for="sub_category_id" class="block">Sub-Category ID</label>
    <select wire:model="sub_category_id" name="sub_category_id" id="sub_category_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-blue-900">
        <option>Select Option</option>
        @foreach($subcategories as $subcategory)
        <option value="{{ $subcategory->id }}">{{ $subcategory->sub_category_name }}</option>
        @endforeach
        @error('sub_category_id') <h1 class="text-red-500">{{$message}}</h1>@enderror
    </select>
</div>
@endif

当您循环单选按钮时，正确的表单元素将出现/消失。 要为这种过渡设置动画，您可能会使用一些 css 类并添加删除它们。