0

This platform is beautiful when it works, super frustrating when it doesn't. Any ideas? For some unknown reason I can't get the template to skip the branch when false, it is always rendering...

template

showSubmitButton = {showSubmitButton}
<template if:true={showSubmitButton}>
    <li class="slds-item">
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_9-of-12 slds-medium-size_10-of-12 slds-large-size_3-of-12 ">
                <lightning-button variant="brand" label="Submit"  title="Submit" onclick={handleSubmitClick}></lightning-button>
            </div>
        </div>
    </li>
</template>

javascript

@api showSubmitButton=false;
connectedCallback() {
    console.log(`bw: showSubmitButton = ${this.showSubmitButton}`);
}

call to the component

<c-test show-submit-button="false"></c-test>

console result

bw: showSubmitButton = false

page result

enter image description here

2

As per documentation

NOTE Setting show="false" evaluates to true. The only way to specify false in markup is to omit the boolean attribute.

You can do this in your callback:

    if(this.showSubmitButton === 'false') {
        this.showSubmitButton = false;
    }

or you can omit the variable from the parent itself. and it should work.

If you really want to set the attribute dynamically then you need a getter in you parent component like this :

<c-test show-submit-button={computedValue}></c-test>

get computedValue(){
    return false;
}
1
  • Thank you so much, that was driving me crazy! Dec 21 '20 at 0:47

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.