0

I have a lightning-button-icon with dynamic name and i want to update its selected attribute based on the name. Can someone tell me how can i do that?

my code (UPDATED):

<lightning-layout-item size="3">
                    <lightning-button-icon-stateful
                        data-class="slelectState"
                        data-index1={inx1}
                        data-index2={inx2}
                        data-id={pair.key}
                        name={pair.key}
                        icon-name="utility:check"
                        selected={selectState}
                        alternative-text="True"
                        onclick={handleSelect}>
                    </lightning-button-icon-stateful>
                    <lightning-button-icon-stateful
                        data-class="UnslelectState"
                        data-index1={inx1}
                        data-index2={inx2}
                        data-id={pair.key}
                        name={pair.key}
                        icon-name="utility:close"
                        selected={unSelectState}
                        alternative-text="False"
                        onclick={handleUnSelect}>
                    </lightning-button-icon-stateful>
                </lightning-layout-item>

I tried this code this.template.querySelector([name="${selectedname}"]) as per @sfdcfox answer here but it gave me null value.

3
  • can you share the code how you declared selectedname variable ? Jul 16 '20 at 9:55
  • Also please share the handleSelect method Jul 16 '20 at 9:58
  • You cant use name attribute, you have to use data-* attribute only
    – User6670
    Jul 16 '20 at 10:07
2

As of now, You can only query elements with the attributes that are exposed on the element - in this case lightning-button-icon-stateful. The attribute name is not directly placed on this element but it is on internal element.

If you want to see what items you can query, look at the following example.

For example

<lightning-button-icon-stateful
                                    data-index1={inx1}
                                    data-index2={inx2}
                                    name={pairkey}
                                    icon-name="utility:check"
                                    selected={selectState}
                                    alternative-text="True"
                                    onclick={handleSelect}>
    </lightning-button-icon-stateful>

When you do console.log(this.template.querySelector('lightning-button-icon-stateful'));

Output in console:

<lightning-button-icon-stateful c-app_app="" data-index1="12" data-index2="13"></lightning-button-icon-stateful>

So we can only do querySelector with attributes data-* (data-index1, data-index2) and c-app_app (auto generated based on class).

It cannot retrieve elements with other attributes using querySelector, so the following will always be null.

console.log(this.template.querySelector('lightning-button-icon-stateful[name="12"]'));

So in short, you can only retrieve data attributes in the given example as other elements are actually placed on internal element.

Reference: How to target LWC by name attribute?

Alternatively, you can query based on DOM element and iterate the result and verify the name. something like this.

this.template.querySelectorAll('lightning-button-icon-stateful').forEach(ele => {
            if(ele.name == selectedname){
                //TODO
            }
        });
2
  • That was it! Thank you. Now one another issue is that i have two "lightning-button-icon-stateful" buttons with same . Is there a way to query multiple data- attributes? Please see updated question for html markup changes.
    – SunnyG
    Jul 16 '20 at 13:31
  • nevermind.. i figured it out. Thanks again!
    – SunnyG
    Jul 16 '20 at 13:59
0

For LWC html

                <template for:each={questions} for:item="q">
                    <p key={q.Id}>{q.Sequence_Number__c}.{q.Question_Text__c} <br>
                    <lightning-textarea data-id={q.Sequence_Number__c} name={q.Sequence_Number__c} required value="" placeholder="Type your answer here..." label='max length 200 characters' maxlength="200" min-length="10" message-when-too-long="A maximum of 200 characters are allowed in a tweet." message-when-value-missing="You need to fill all answers" field-level-help="Please fill the answers to submit" ></lightning-textarea>
                    <br><br>
                    </p>
                </template>
            </template>

In LWC Js COntroller use this code.

for(var i=1; i<=this.questions.length; i++){ console.log('Answer no : '+i);

    this.template.querySelectorAll('lightning-textarea').forEach(ele => {
        if(ele.name == i){
            console.log(ele.value);
        }
    });
    
}

Where this.questions is a list from apex controller.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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