0

I am working on replacing an Aura component with a LWC. On my Aura I had select fields that were used as filters. I had a function that was called from each filter field that filtered down the attribute used to display the data. Here is an example of one of the filter fields:

 <lightning:layoutItem padding="around-small">
        <!-- Create a dropdown menu with options for Section code-->
        <lightning:select aura:id="selectGroupNum" label="GroupNum" name="sourceGroupNum" onchange=" 
         {!c.FilterChanged}">
             <aura:iteration items="{!v.groupnumbers}" var="gs">
                 <option value="{!gs}" text="{!gs}" />
             </aura:iteration>
        </lightning:select>
     </lightning:layoutItem>

How would I achieve the same thing using LWC? First, what is the LWC equivalent to a lighting:select? Second, since I'm not defining an attribute on the component, do I just create a separate list variable and in my function update that? Thank you!!!!

Fred

3

The standard LWC that's closest to lightning:select would be lightning-combobox (reference). You should be able to translate this implementation entirely to the combobox component as it supports an onchange event that would work like the Aura component you've shared.

Replacing the v.groupnumbers attribute will likely be a property in your LWC class:

<template>
    <!-- ... -->

    <lightning-combobox
        name="group-number-filter"
        label="My Filter" 
        options={groupNumbers}
        placeholder="Select an option"
        onchange={handleFilterChange}></lightning-combobox>

    <!-- ... -->

</template>
import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {

    @api groupNumbers = [];

    handleFilterChange(event) {
        // handle change, modify groupNumbers
    }

}
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.