0

Trying to pass a default value to an @api decorated property, somehow I get undefined variable, here is my code meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="mroConsumptionTable">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property
                    name="type"
                    label="Per slot array"
                    type="String"
                    default="Single Rate"
                    required="true"
            />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

.js

 @api set type(value){
        console.log('in set type');
        console.log(value);
        this._type = value;
        this.generateData();
    }
    get type(){
        return this._type;
    }

If you don't have a solution for this exact code, at least do share a working example of passing a property to a component

3

1 Answer 1

1

We do something similar with the following, and I know this works. In the meta:

    <targetConfig targets="lightning__RecordPage">
        <property name="definitionName" label="Definition Name" type="String" required="true" datasource="apex://ScheduleDefinitionPickList"/>
        <property name="minimumHeight" label="Minimum Height" type="String" default="30em" required="false"/>
    </targetConfig>

In the component:

/**
 * The configured minimum height get.
 *
 * @return {string}
 */
@api get minimumHeight() {
    return this._minimumHeight;
}

set minimumHeight(value) {
    this._minimumHeight = value;
    this.state.rootStyle = value ? `min-height: ${value};` : '';
}

The only difference I can see is actually around where the @api is put when having get/set functions. We put it on the get, not on the set (the @api in this case can only go on one of the functions and we put it on the get).

2
  • unfortunately it doesn't work in my case, I need this component to be able to accept data from outer component that's why I need a setter, I wanted to use this default target property just for testing but it looks like it's easier to create another component for this purpose Jan 23, 2020 at 13:57
  • 2
    I think what phil is saying is the @api decorator just needs to be put on the get, but it will be applicable on both the get and set.
    – willard
    Jan 23, 2020 at 14:10

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.