Skip to main content
Topics#TrailheadShruthi GM의 질문
Shruthi GM 님이 #Trailhead에 질문했습니다
2018년 10월 31일 오전 6:15

Struck in a trial head

I am trying to solve one of the lightning trail heads of creating Camping list.

Here is my component.

<aura:component>

 <!-- PAGE HEADER -->

<aura:attribute name="newItem" type="Camping_Item__c"

    default="{ 'sobjectType': 'Camping_Item__c','Name': '',

             'Quantity__c': 0,

             'Price__c': 0,

             'Packed__c': false }"/>

<aura:attribute name="items" type="Camping_Item__c[]"/>

     

    <!-- PAGE HEADER -->

    <lightning:layout class="slds-page-header slds-page-header--object-home">

        <lightning:layoutItem>

            <lightning:icon iconName="standard:scan_card" alternativeText="Camping List"/>

        </lightning:layoutItem>

        <lightning:layoutItem padding="horizontal-small">

            <div class="page-section page-header">

                <h1 class="slds-text-heading--label">Camping List</h1>

                <h2 class="slds-text-heading--medium">List</h2>

            </div>

        </lightning:layoutItem>

    </lightning:layout>

    <!-- / PAGE HEADER -->

    <!-- NEW CAMPINGLIST FORM -->

    <lightning:layout>

        <lightning:layoutItem padding="around-small" size="6">

        <!-- [[ CampingList form goes here ]] -->

        </lightning:layoutItem>

    </lightning:layout>

    <!-- / NEW CAMPINGLIST FORM -->

        <!-- CREATE NEW LIST -->

    <div aria-labelledby="newexpenseform">

        <!-- BOXED AREA -->

        <fieldset class="slds-box slds-theme--default slds-container--small">

        <legend id="newexpenseform" class="slds-text-heading--small 

          slds-p-vertical--medium">

          Add List

        </legend>

    

    

    

    <!-- CREATE NEW ITEM FORM -->

            

    <form class="slds-form--stacked">          

    <lightning:input aura:id="itemform" label="Name"

                             name="itemName"

                             value="{!v.newItem.Name}"

                             required="true"/> 

        

        

    <lightning:input type="number" aura:id="itemform" label="Quantity"

                             name="itemQuantity"

                             value="{!v.newItem.Quantity__c}"

                             required="true"/>

        

    <lightning:input type="number" aura:id="itemform" label="Price"

                             name="itemPrice"

                             min="0.1"

                             formatter="currency"

                             step="0.01"

                             value="{!v.newItem.Price__c}"

                             messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>

        

    <lightning:input type="checkbox" aura:id="itemform" label="Packed"  

                             name="itemPacked"

                             checked="{!v.newItem.Packed__c}"/>  

        

     <lightning:button label="Create Camping Item" 

                              class="slds-m-top--medium"

                              variant="brand"

                              onclick="{!c.clickCreate}"/>

            

</form>

    <!-- / CREATE NEW ITEM FORM -->

    <div class="slds-card slds-p-top--medium">

        <header class="slds-card__header">

            <h3 class="slds-text-heading--small">Items</h3>

        </header>

         

        <section class="slds-card__body">

            <div id="list" class="row">

                <aura:iteration items="{!v.items}" var="items">

                    <c:campingListItem item="{!item}"/>

                </aura:iteration>

            </div>

        </section>

    </div>

        </fieldset>

    </div>

</aura:component>

Component Controller:

({

    clickCreate: function(component, event, helper) {

        var validItem = component.find('itemform').reduce(function (validSoFar, inputCmp) {

            // Displays error messages for invalid fields

            inputCmp.showHelpMessageIfInvalid();

            return validSoFar && inputCmp.get('v.validity').valid;

        }, true);

        

    }

})

But the button "Click Create" has become static and is not working.Please help me so that it works!!!!

Please help.

Thanks in advance.
답변 1개
  1. Deepali kulshrestha (CA)
    2019년 4월 24일 오전 10:33
    Hi Shruthi,

    "Create a Simple Camping List Lightning Component" i think your trailhead question is this. So,

    Try this:-

    1)Setup->Developer Console->File->New->Lightning Component->Save as

    campingList

    Code:

    <aura:component >

        <ol>

        <li>Bug Spray</li>

        <li>Bear Repellant</li>

        <li>Goat Food</li>

        </ol>

    </aura:component>

    2)Take new Lightning Component name it as campingHeader

    Code: 

    <aura:component >

        <H1>Camping List </H1>

    </aura:component>

    Choose Style from Right Side Menu, it automatically generates default code

    replace it with

    h1.THIS {

        font-size: 18px;

    }

    Take new Lightning Component name it as camping

    Code:

    <aura:component >

         <c:campingHeader />

         <c:campingList />  

    </aura:component>

    If u want to see a preview of that create a Lightning app name it as campingApp

    Code:

    <aura:application >

        <c:camping />

    </aura:application>

    See Preview from the right side menu Like this.-

    Hi Shruthi,

    Step by step instruction watch this video:-

    https://www.youtube.com/watch?v=UBeAStgdkzg

    I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

    Thanks and Regards,

    Deepali Kulshrestha
답변을 작성하세요...
0/9000