LWC: Only enable button if options are available

Salesforce Asked on January 1, 2021

I would like to enable/disable a button in LWC depending on if a list variable is empty or not. I know it’s possible with a formula in Aura, is it doable in LWC? I have tried the below, but it doesn’t work.

        <lightning-layout horizontal-align="space" vertical-align="end">
            <lightning-layout-item padding="horizontal-small" flexibility="grow">
                <lightning-combobox
                    name="objects"
                    label="Objects"
                    value={selectedObject}
                    placeholder="Select Object"
                    options={options.data}
                    onchange={handleObjectChange}
                ></lightning-combobox>
            </lightning-layout-item>
            <lightning-layout-item padding="horizontal-small">
                <lightning-button 
                    variant="brand"
                    label="Add"
                    title="Add object"
                    onclick={handleAdd}
                    class="slds-m-left_small"
                    disabled={empty(options.data)} <------ this line
                ></lightning-button>
            </lightning-layout-item>
        </lightning-layout>

button html lightning web components wire

One Answer

You need to use the property with the get method.

get showButton(){
    return this.options && this.options.data && this.options.data.length;
}

HTML

<lightning-button 
    variant="brand"
    label="Add"
    title="Add object"
    onclick={handleAdd}
    class="slds-m-left_small"
    disabled={showButton}
></lightning-button>

Correct answer by rahul gawale on January 1, 2021

Add your own answers!

Ask a Question

Get help from others!