Passing property to LWC component

Question

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

Answer 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).