2

I have a parent component and child component in LWC. Parent component has a list of items lineItems and a Submit button. Child component is iterating over lineItems list.

Parent.html

<template>
  <template for:each={lineItems} for:item='item'>
  <c-child key={item.id}  line-item = {item}></c-child>
</template> 
<lightning-button label="Add Todo" onclick={handleSave} class="slds-p-vertical_small">
</lightning-button>
</template>

lineItems looks something like this:

listItem = [
        { id: 1, description: 'Explore recipes', priority: true , region:'area1' },
        { id: 2, description: 'Install Ebikes sample app', priority: false, 'area2' },
        { id: 2, description: 'testing Ebikes', priority: true, 'area3' }
    ];

Now, in child component, all these fields will be lightning-input and editable. So, user can update any of these fields. And, When Submit button is clicked on parent component, I should have the updated list from the child components.

I tried finding solution for this but could not find it.

2
  • You're missing a </template> closure.... is that intentional? – Sebastian Kessel Apr 13 '20 at 17:15
  • added </template>. It was a typo – devforce Apr 13 '20 at 17:26
1

In LWC, you cannot inspect a child's properties. Instead, you have to rely on an event to tell the parent what happened. So I recommend you create an event in your child when your data changes, and then handle the event in the parent to update the collection. This is, in essence, what happens when you create an onchange handler for an lighting-input.

Following is a very bare-bones example, you need to wire it up properly to your components.

In the child HTML/JS, you do something like this:

<lightning-input name="myText" onchange={handleOnchange}></lightning-input>

handleOnchange() {
    // Creates the event with the contact ID data.
    const changeEvent = new CustomEvent('change', { detail: <your data> });

    // Dispatches the event.
    this.dispatchEvent(changeEvent);
}

In the parent HTML/JS, you handle the event like this:

<c-child key={item.id}  line-item = {item} onchange={handleDataChange}></c-child>

handleDataChange() {
  const myData = event.detail;
  //Do whatever you need with the data
}

Reference for events can be found here and a trailhead here

6
  • But there are multiple input fields in child component, are you suggesting to fire event if any of these input fields get changed. Would there be any performance impact? – devforce Apr 13 '20 at 17:25
  • Yes I am suggesting that. And I don't think you'll encounter any performance issues... it is JS after all, you're not going to the server for each call. – Sebastian Kessel Apr 13 '20 at 17:27
  • You may want to tweak your UX to have a "Save" button, or perhaps add some logic to when the event is fired.... but you need an event to tell the parent what is the new information the child has. – Sebastian Kessel Apr 13 '20 at 17:28
  • Thanks @Sebastian. Do you think it is possible to fetch list from child component using this.template.querySelectorAll('classname')...? – devforce Apr 13 '20 at 17:34
  • 1
    Added a trailhead link on top of the reference I had before – Sebastian Kessel Apr 13 '20 at 17:37

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.