I am trying to filter the lookup on my LWC based on a picklist value(combobox) on the same screen. This LWC funtunality allows the user to create multiple lanes. These lanes include origin,destination and product type which I save in a array where I then pass it to my Apex to create records.
This is my HTML file.
<template>
    <div class="all-form-div">
        <template for:each={lanes} for:item="lane" for:index="index">
           
            <div class="individual-form-div" key={lane.id}>
                <div class="select-field">
                    <lightning-combobox
                        class="lightning-input-select"
                        data-id={index}
                        name="product"
                        label="product Type"
                        value={value}
                        placeholder="Select a package type"
                        options={productTypeOptions}
                        onchange={handleChange}>
                    </lightning-combobox>
                </div>
               
                <lightning-record-edit-form data-id={index} object-api-name="Lanes_Identified__c">
                    <div class="input-fields">
                        <div class="input-field">
                            <lightning-input-field field-name="Origin__c" onchange={handleChange} data-id={index} value={lane.origin} name="origin" label="Origin"></lightning-input-field>
                        </div>
                        <div class="input-field">
                            <lightning-input-field field-name="Destination__c" onchange={handleChange} data-id={index} value={lane.destination} name="destination" label="Destination"></lightning-input-field>
                        </div>
                    </div>
                </lightning-record-edit-form>
               
                <div class="input-field">
                    <lightning-input
                        data-id={index}
                        message-when-value-missing=" "
                        label="Volume"
                        name="Volume"
                        type="number"
                        required="true"
                        onchange={handleChange}>
                    </lightning-input>
                </div>
                <div class="delete-button">
                    <lightning-button-icon
                        icon-name="utility:delete"
                        data-id={index}
                        onclick={deleteVolume}
                        value={lane.id}>
                    </lightning-button-icon>
                </div>
            </div>
        </template>
        <hr>
    </div>
    <div class="add-button">
        <lightning-button-icon
            icon-name="utility:add"
            class="add-another"
            onclick={addAnother}>
        </lightning-button-icon>
    </div>
</template>
This is my JS file
import { LightningElement, api, wire, track } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
export default class CreateLanesIdentified extends LightningElement {
    @api parcel_json_string = '';
    @api recordId;
    @track originfield;
    @track destinationfield;
    id = 1;
    @track lanes = [
        {
            id: 0,
            origin: "",
            destination: "",
            product: "Air",
            volume: 0
        }
    ];
    // @api validate(){
    //     let allFieldsFilled = true;
    //     let errorMsg = '';
    //     for (let i = 0; i < this.lanes.length; i++) {
    //         let elem = this.lanes[i];
    //         if(!elem.origin||
    //             !elem.destination ||
    //             !elem.product ||
    //             !elem.volume
    //              ){
    //                 allFieldsFilled = false;
    //                 errorMsg = 'Please fill out all the fields.';
    //                 break;
    //              }
    //     }
    //     if (allFieldsFilled) {
    //         return { isValid: true };
    //     } else {
    //         return { isValid: false, errorMessage: errorMsg };
    //     }
    // }
    get productTypeOptions() {
        return [
            { label: 'Air', value: 'Air' },
            { label: 'Ocean', value: 'Ocean' },
            { label: 'Ground', value: 'Ground' },
        ];
    }
    @wire(getRecord, { recordId: '$recordId', fields: ['Lanes_Identified__c.Origin__c', 'Lanes_Identified__c.Destination__c'] })
    location;
    handleChange(evt) {
        console.log(evt.target.value)
        this.lanes[evt.target.dataset.id][evt.target.name] = evt.target.value;
        console.log(this.lanes[evt.target.dataset.id])
        this.parcel_json_string = JSON.stringify(this.lanes)
        console.log(this.parcel_json_string,"this.parcel_json_string")
    }
    addAnother() {
        // let flag = true;
        // this.lanes.forEach((elem) => {
        //     if (!elem.origin || !elem.destination || !elem.volume) {
        //         flag = false;
        //     }-
        // });
        // if (!flag) {
        //     return;
        // }
        console.log(this.lanes, "lanes array before push")
        this.lanes.push({
            id: this.id++,
            origin: "",
            destination: "",
            product: "Air",
            volume: 0
        });
        console.log(this.lanes, "lanes array after the push")
        this.parcel_json_string = JSON.stringify(this.lanes)
        console.log(this.parcel_json_string,"this.parcel_json_string")
    }
    deleteVolume(evt) {
        if (this.lanes.length <= 1) {
            return;
        }
        this.lanes.splice(evt.target.dataset.id, 1);
        this.parcel_json_string = JSON.stringify(this.lanes)
        console.log(this.parcel_json_string,"this.parcel_json_string")
       
    }
 
}