0

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>

2 Answers 2

2

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.

0

You can do this like this:-

TechDataFn(){
   if(this.selected){
     this.template.querySelector('lightning-button').variant='success';
   }else{
     this.template.querySelector('lightning-button').variant='neutral';
   }
}

You can't use expression in html file in Lightning web component. You can access the button in your js file and change the attribute value.

And your html file will be:-

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

Check the playground snippet:- change button variant in playground

2
  • if(this.selected) is not working
    – Mohd
    Sep 11, 2019 at 11:18
  • I assume selected is a property based on that you want to change the variant value. Sep 11, 2019 at 11:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .