来自livewire下拉列表的多个值答案

【问题标题】：multiple value from dropdown in livewire来自livewire下拉列表的多个值
【发布时间】：2021-10-08 06:18:00
【问题描述】：

我在表单中有一个下拉列表和文本输入。表单创建一门课程，我想从下拉菜单中选择课程教室并将其容量写入文本输入。但是一门课程可能有多个教室。我怎样才能保留这些教室及其容量，并在表格下方的表格中显示它们？像这样：

这是我的代码，只保留一个教室和容量

<div class="sm:col-start-1 sm:col-end-3 col-span-3  ">
    <x-select x-on:change="isShowing = $event.target.value" name="classroom_id" label="{!! __('Classroom') !!}" wire:model="classroom_id"
            id="classroom_id"
            :options="$this->classrooms"/>
    <x-jet-input-error for="classroom_id" class="mt-2" />
</div>
<div class="col-span-2 sm:col-span-1 " x-show="isShowing">
    <label class="tf-form-label" for="capacity">
        {{ __('Capacity') }}
    </label>
    <input wire:model.debounce.250ms="capacity" type="text" name="capacity" id="capacity" class="tf-input" />
    <x-jet-input-error for="capacity" class="mt-2" />
</div>

$this->form->save();// firstly course saved
$classroom = new Classroom();
$classroom->course_id = $this->form->id;
$classroom->classroom_id = $this->classroom_id;
$classroom->capacity = $this->capacity;
$classroom->save();

【问题讨论】：

您应该为它编写代码，如果有任何问题，请来这里帮助您实现目标

标签： php laravel laravel-livewire

【解决方案1】：

在您的组件中添加以下代码。

组件

 public $classroom_id, $capacity;
 
 $course = Course::create($validatedCourseData); // firstly course saved
 
 // $this->classroom_id is array, because we set "multiple" in blade file
 $course->classrooms()->attach($this->classroom_id);

刀片

请在您的选择框代码中添加多个。

<div class="sm:col-start-1 sm:col-end-3 col-span-3  ">
    <x-select x-on:change="isShowing = $event.target.value" name="classroom_id" label="{!! __('Classroom') !!}" wire:model="classroom_id"
            id="classroom_id"
            :options="$this->classrooms" multiple/>
    <x-jet-input-error for="classroom_id" class="mt-2" />
</div>
<div class="col-span-2 sm:col-span-1 " x-show="isShowing">
    <label class="tf-form-label" for="capacity">
        {{ __('Capacity') }}
    </label>
    <input wire:model.debounce.250ms="capacity" type="text" name="capacity" id="capacity" class="tf-input" />
    <x-jet-input-error for="capacity" class="mt-2" />
</div>

【讨论】：