1

I'm Having some trouble with this unit. My code is as below and the problem is that I get an error when I click on the Checkbox:

This page has an error. You might just need to refresh it. Error in $A.getCallback() [Cannot read property 'Packed__c' of null] Failing descriptor: {markup://lightning:input}

Or on the button

This page has an error. You might just need to refresh it. Action failed: c:campingListItem$controller$packItem [Cannot read property 'Packed__c' of null] Failing descriptor: {c:campingListItem$controller$packItem}

Another minor issue is that next to my checkbox there are the words ActiveInactive

campingListItem.cmp

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c"  required="false"/>
  <p>{!v.item.Name}</p>
    <p>  
       <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>  
       <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    </p>

 <lightning:input type="toggle" label = "Packed?" 
                   checked="{!v.item.Packed__c}" name = "packed">
   </lightning:input>

    <div>
        <lightning:button label="Packed!" onclick="{!c.packItem}"/>
   </div>
</aura:component>

campingListItemController.js

({
    packItem: function(component, event, helper)
    {
        component.get("{!v.Packed}") = true;
        event.getSource().set("v.disabled", true); 
    },
})

The button disable works though.

Perhaps the code isn't meant to run but I get this message when I try to complete the challenge:

The campingListItem JavaScript controller isn't using 'component.set' to set the 'v.item' correctly to disable it.

when running this controller:

({
    packItem: function(component, event, helper)
    {
        console.log("clicked");
        component.set("v.item.Packed__c", true);
        event.getSource().set("v.disabled", true); 
    },
})

closed as too broad by glls, battery.cord, Santanu Boral, Mohith Shrivastava, Ratan Paul Oct 4 '17 at 2:58

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    How is this question too broad? It's very specific and has plenty of detail, the answer I discovered shows that it's even more specific as you need to solve the challenge in the way that Salesforce wants you to – Aequitas Oct 11 '17 at 2:13
3

The reason for this is that to complete the challenge you need to do it in the way that they want. Also you do not need it to be runnable.

Create another attribute and use that to set the button to disabled instead of disabling it directly and it will pass.

Controller:

({
    packItem: function(component, event, helper)
    {
        let item = component.get("v.item");
        item.Packed__c = true;
        component.set("v.item", item);
        component.set("v.disabled", true)
    },
})

Component:

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <aura:attribute name="disabled" type="Boolean" default="false"/>
    <p>{!v.item.Name}</p>
    <p>{!v.item.Packed__c}</p>
    <p>  
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>  
        <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    </p>

    <lightning:input type="toggle" 
                     label="Packed?" 
                     checked="{!v.item.Packed__c}" 
                     name="packed">
    </lightning:input>

    <div>
        <lightning:button label="Packed!" onclick="{!c.packItem}" disabled="{!v.disabled}"/>
    </div>
</aura:component>
  • 1
    You will get Internal server error because there is no default value defined. Add this default="{Name:'Testing', Price__c:100, Quantity__c:1, Packed__c:false}" – unidha Dec 3 '17 at 12:00

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