[SalesForce] Change the Variant of Lightning-Button After click

See the variant in code so how can i change the color of button after click on this

<lightning-button style="padding: 0 20px 0 0;"
                                            value={item.value}
                                            key={item.value}
                                            label={item.label}
                                            data-value={item.value}
                                            onclick={TechDataFn}
                                            variant={selected ? neutral : success}     >
                                        </lightning-button>

Best Answer

As an alternative to the other answer, you can also make a variable and track that:

@track variant = 'neutral';
TechDataFn() {
  this.variant = 'success';
}

Or, you can use a getter:

@track success = false;
TechDataFn() {
    this.success = true;
}
get variant() {
    return this.success? 'success': 'neutral';
}

You can also use an event target to specify changes:

TechDataFn(event) {
    event.target.variant="success";
}

Here's a playground demonstrating the three options described above.

As stated in the other answer, you can't use "expressions", so getters are the more usual way to get a calculated value. You'll want to remember this pattern for other uses.

Related Topic