添加的行子下拉值是基于第一行的下拉列表

Question

我正在使用 livewire 添加和删除行，并执行动态下拉菜单。我的问题是，当我添加新行时，该添加行的子商品的值基于第一行中选定的商品，而不是基于其同一添加行的商品。

e-linkage-components.blade.php

<div class="row">
    <div class="col-md-4 mb-2">
        <label for="associationName" class="form-label label-style">Association Name</label>
        <input wire:model="associationName.0" type="text" class="form-control" name="associationName[]"
            id="associationName" autocomplete="off" value="{{ $associationProfile->association }}" readonly>
    </div>

    <div class="col-md-4 mb-2">
        <label for="commodity" class="form-label label-style">Commodity</label>
        <select wire:model.live="commoditiesID.0" id="commodity" name="commodity[]" class="form-select">
            <option value="">Select Commodity</option>
            @foreach ($commodities as $commodity)
                <option value="{{ $commodity->id }}">{{ $commodity->commodity }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4 mb-2">
        <label for="subCommodity" class="form-label label-style">Sub Commodity</label>
        <select wire:model.live="subCommoditiesID.0" id="subCommodity" name="subCommodity[]" class="form-select">
            <option value="">Select Sub Commodity</option>
            @foreach ($subCommodities as $subCommodity)
                <option value="{{ $subCommodity->id }}">{{ $subCommodity->subCommodities }}</option>
            @endforeach
        </select>
    </div>

    <div class="row">
        <div class="col-md-2 mb-2">
            <label for="variety" class="form-label label-style">Variety</label>
            <input wire:model="variety.0" type="text" class="form-control" name="variety[]" id="variety"
                autocomplete="off">
        </div>

        <div class="col-md-2 mb-2">
            <label for="volume" class="form-label label-style">Volume (Kg)</label>
            <input wire:model="volume.0" type="text" class="form-control" name="volume[]" id="volume"
                autocomplete="off">
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 mb-2">
            <label for="startDate" class="form-label label-style">Estimated
                Time of Harvest <br> (Start Date)</label>
            <input wire:model="startDate.0" type="date" class="form-control" name="startDate[]" id="startDate">
        </div>

        <div class="col-md-3 mb-2">
            <label for="endDate" class="form-label label-style">Estimated
                Time of Harvest <br> (End Date)</label>
            <input wire:model="endDate.0" type="Date" class="form-control" name="endDate[]" id="endDate">
        </div>
    </div>
    <hr>

    @foreach ($inputs as $key => $value)
        <div class="col-md-4 mb-2">
            <label for="associationName" class="form-label label-style">Association Name</label>
            <input wire:model="associationName.{{ $value }}" type="text" class="form-control"
                name="associationName[]" id="associationName" autocomplete="off"
                value="{{ $associationProfile->association }}" readonly>
        </div>

        <div class="col-md-4 mb-2">
            <label for="commodity" class="form-label label-style">Commodity</label>
            <select wire:model="commoditiesID.{{ $value }}" id="commodity" name="commodity[]"
                class="form-select">
                <option value="">Select Commodity</option>
                @foreach ($commodities as $commodity)
                    <option value="{{ $commodity->id }}">{{ $commodity->commodity }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-4 mb-2">
            <label for="subCommodity" class="form-label label-style">Sub Commodity</label>
            <select wire:model="subCommoditiesID.{{ $value }}" id="subCommodity" name="subCommodity[]"
                class="form-select">
                <option value="">Select Sub Commodity</option>
                @foreach ($subCommodities as $subCommodity)
                    <option value="{{ $subCommodity->id }}">{{ $subCommodity->subCommodities }}</option>
                @endforeach
            </select>
        </div>

        <div class="row">
            <div class="col-md-2 mb-2">
                <label for="variety" class="form-label label-style">Variety</label>
                <input wire:model="variety.{{ $value }}" type="text" class="form-control" name="variety[]"
                    id="variety" autocomplete="off">
            </div>

            <div class="col-md-2 mb-2">
                <label for="volume" class="form-label label-style">Volume (Kg)</label>
                <input wire:model="volume.{{ $value }}" type="text" class="form-control" name="volume[]"
                    id="volume" autocomplete="off">
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 mb-2">
                <label for="startDate" class="form-label label-style">Estimated
                    Time of Harvest <br> (Start Date)</label>
                <input wire:model="startDate.{{ $value }}" type="date" class="form-control"
                    name="startDate[]" id="startDate">
            </div>

            <div class="col-md-3 mb-2">
                <label for="endDate" class="form-label label-style">Estimated
                    Time of Harvest <br> (End Date)</label>
                <input wire:model="endDate.{{ $value }}" type="Date" class="form-control"
                    name="endDate[]" id="endDate">
            </div>

            <div class="col-md-2 mb-2 d-flex mt-auto">
                <button type="button" wire:click="remove({{ $key }})"
                    class="btn btn-danger">Remove</button>
            </div>
        </div>
        <hr>
    @endforeach

    <div class="col-md-2 mb-2 d-flex mt-auto">
        <button type="button" wire:click="add({{ $i }})" class="btn btn-success">Add more</button>
    </div>

</div>

ELinkageComponents.php

<?php

namespace App\Livewire;

use App\Models\AssociationProfile;
use App\Models\BuyerLinkage;
use App\Models\Commodities;
use App\Models\SubCommodities;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;

class ELinkageComponents extends Component
{
    public $user;
    public $associationProfile;
    public $ELinkages;
    public $commoditiesID;
    public $subCommoditiesID;
    public $inputs;
    public $i;
    public $associationName;
    public $variety;
    public $volume;
    public $startDate;
    public $endDate;

    public function mount()
    {
        $this->user = Auth::user();
        $this->associationProfile = AssociationProfile::where('userId', $this->user->id)->first();
        $this->ELinkages = BuyerLinkage::join('commodities', 'buyer_e_linkages.commodity', '=', 'commodities.id')->select('buyer_e_linkages.*', 'commodities.commodity as commodity_name')->get();
        $this->inputs = [];
        $this->commoditiesID = [];
        $this->subCommoditiesID = [];
        $this->associationName = [$this->associationProfile->association];
        $this->variety = [];
        $this->volume = [];
        $this->startDate = [];
        $this->endDate = [];
        $this->i = 1;
    }

    public function add($i)
    {
        $this->i = $i + 1;
        array_push($this->inputs, $i);
        $this->associationName[$i] = $this->associationProfile->association;
    }

    public function remove($key)
    {
        unset($this->inputs[$key]);
    }

    public function render()
    {
        return view('livewire.e-linkage-components', [
            'commodities' => Commodities::all(),
            'subCommodities' => SubCommodities::where('commodityId', $this->commoditiesID)->get(),
            'user' => $this->user,
            'associationProfile' => $this->associationProfile,
            'ELinkages' => $this->ELinkages,
        ]);
    }
}

我做了一些测试，我没有在第一行中选择任何商品，我添加了一个新行，然后我在该行中选择了一个商品，但是当我检查子商品时，它没有任何值。就像子商品下拉列表的值仅基于第一行的商品。

Answer 1

我建议你重构：

1. 将所有字段存储在一个数组中，其中每行代表一个“子表单”
2. 不再需要索引$i，我们将使用数组索引
3. 为每个“子表单”添加一个 row:key，数组索引是一个不错的选择，因为我们将使用 unset() 删除行，这样索引就不会被压缩
4. 要检索子商品，我们将使用带有参数（所选商品）的方法
5. 我们不会为第一个固定“子表单”重复相同的 HTML 代码，然后为变量重复相同的 HTML 代码，而是将所有内容放入 @foreach() 循环中并添加一些控件

这里我还添加了一个按钮来显示数据的变化

班级：

class ELinkageComponents extends Component
{
    protected $user;
    protected $associationProfile;
    public $associationName
    public $inputData = [];


    public function mount()
    {
        $this->user = Auth::user();
        $this->associationProfile = AssociationProfile::where('userId', $this->user->id)->first();

        $this->associationName = [$this->associationProfile->association];
        $this->add();
    }


    public function getsubCommodities($commoditiyId)
    {
        return SubCommodities::where('commodityId', $commoditiyId)->orderBy('subCommodities')->get();
    }


    // this method resets subcommoditu on commodity change
    public function updatedInputData($value, $key)
    {
       [$rowId, $fieldName] = explode('.', $key);

       if ($fieldName == 'commodityId') {
            $this->inputData[$rowId]['subCommodityId'] = null;
       }
    }


    public function add()
    {
        $this->inputData[] = [ 'associationName' => $this->associationProfile->association,
                               'commodityId' => null,
                               'subCommodityId' => null,
                               'variety' => null,
                               'volume' => null,
                               'startDate' => null,
                               'endDate' => null,
        ];
    }


    public function remove($rowId)
    {
        if ($rowId != array_key_first($this->inputData))
            unset($this->inputData[$rowId]);
    }


    public function showData()
    {
        dd ($this->inputData);
    }


    public function render()
    {
        return view('livewire.comm', [
            'commodities' => Commodities::all(),
            'associationProfile' => $this->associationProfile,
        ]);
    }
}

景色：

<div class="row">

    @foreach ($inputData as $rowId => $row)

        <div class="row" wire:key="{{ $rowId }}">

            <div class="col-md-4 mb-2">

                <label for="associationName" class="form-label label-style">
                    Association Name
                </label>

                <input wire:model="inputData.{{ $rowId }}.associationName"
                       type="text"
                       id="associationName"
                       class="form-control"
                       autocomplete="off"
                       value="{{ $associationProfile->association }}"
                       readonly
                >

            </div>

            <div class="col-md-4 mb-2">

                <label for="commodity" class="form-label label-style">
                    Commodity
                </label>

                <select wire:model.live="inputData.{{ $rowId }}.commodityId"
                        id="commodity"
                        class="form-select"
                >

                    <option value="">Select Commodity</option>

                    @foreach ($commodities as $commodity)

                        <option value="{{ $commodity->id }}">
                            {{ $commodity->commodity }}
                        </option>

                    @endforeach

                </select>

            </div>

            <div class="col-md-4 mb-2">

                <label for="subCommodity" class="form-label label-style">
                    Sub Commodity
                </label>

                <select wire:model="inputData.{{ $rowId }}.subCommodityId"
                        id="subCommodity"
                        class="form-select"
                >

                    <option value="">Select Sub Commodity</option>

                    @foreach ($this->getSubCommodities($row['commodityId']) as $subCommodity)

                        <option value="{{ $subCommodity->id }}">
                            {{ $subCommodity->subCommodities }}
                        </option>

                    @endforeach

                </select>

            </div>

            <div class="row">

                <div class="col-md-2 mb-2">

                    <label for="variety" class="form-label label-style">
                        Variety
                    </label>

                    <input wire:model="inputData.{{ $rowId }}.variety"
                           type="text"
                           class="form-control"
                           name="variety[]"
                           id="variety"
                           autocomplete="off"
                    >

                </div>

                <div class="col-md-2 mb-2">

                    <label for="volume" class="form-label label-style">
                        Volume (Kg)
                    </label>

                    <input wire:model="inputData.{{ $rowId }}.volume"
                           type="text"
                           class="form-control"
                           name="volume[]"
                           id="volume"
                           autocomplete="off"
                    >

                </div>

            </div>

            <div class="row">

                <div class="col-md-3 mb-2">

                    <label for="startDate" class="form-label label-style">
                        Estimated Time of Harvest <br>
                        (Start Date)
                    </label>

                    <input wire:model="inputData.{{ $rowId }}.startDate"
                           type="date"
                           class="form-control"
                           name="startDate[]"
                           id="startDate"
                    >

                </div>

                <div class="col-md-3 mb-2">

                    <label for="endDate" class="form-label label-style">
                        Estimated Time of Harvest <br>
                        (End Date)
                    </label>

                    <input wire:model="inputData.{{ $rowId }}.endDate"
                           type="Date"
                           class="form-control"
                           name="endDate[]"
                           id="endDate"
                    >

                </div>

                @if($rowId != array_key_first($inputData)) {{--count($inputData) > 1--}}

                    <div class="col-md-2 mb-2 d-flex mt-auto">

                        <button type="button"
                                wire:click="remove({{ $rowId }})"
                                class="btn btn-danger"
                        >
                            Remove
                        </button>

                    </div>

                @endif

            </div>

            <hr>

        </div>

    @endforeach

    <div class="col-md-2 mb-2 d-flex mt-auto">

        <button type="button"
                wire:click="add()"
                class="btn btn-success"
        >
            Add more
        </button>

    </div>

    <div class="col-md-2 mb-2 d-flex mt-auto">

        <button type="button"
                wire:click="showData()"
                class="btn btn-primary"
        >
            Show data
        </button>

    </div>
    
</div>