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? Commented Apr 13, 2020 at 17:15
  • added </template>. It was a typo
    – devforce
    Commented Apr 13, 2020 at 17:26

1 Answer 1

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
    Commented Apr 13, 2020 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. Commented Apr 13, 2020 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. Commented Apr 13, 2020 at 17:28
  • Thanks @Sebastian. Do you think it is possible to fetch list from child component using this.template.querySelectorAll('classname')...?
    – devforce
    Commented Apr 13, 2020 at 17:34
  • 1
    Added a trailhead link on top of the reference I had before Commented Apr 13, 2020 at 17:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .