0

I have a component that displays a list of questions using a for:each. For each question rendered I have a child component (which is a simple form with a few fields) to capture a followup question.

I want to be able to render the specific child component on button click on parent. The parent component looks like this -

<template for:each={list} for:item={question}>
    <lightning-edit-form record-id={question.id} object-api-name="customobj__c" key={question.id}>
    <lightning-output-field field-name="customfield__c" data-question={question.Name}></lightning-output-field>
    <lightning-button type="submit" label="submit" onclick={handleclick} data-id={question.Name}></lightning-button>

This repeats for various fields being rendered conditionally. Submit button also is added to each field type

I want this div to show up when submit button is clicked only for that instance of question (not under every question)

<template if:true={isBool}
    <div class="slds-box" data-followup={question.Name}> 
        <c-child-component question-id={question.Id}/>
    </div>
</template>

I am trying to see if I can match the data-attribute on Submit button(data-id) click to div(data-question) and render that specific div.

Improve this question

2 Answers 2

Reset to default
0 
if:true={isBool}

Should be:

if:true={question.isBool}

Which, by the way, isn't a great name for a variable unless you mean to say the data type is a checkbox.

You need one variable per row in order to control each row independently.

Improve this answer
3
  • Agreed on the boolean variable naming. the boolean used in if:true is set on button click, it is not a field on question. The issue I have is - question list that edit-form uses is a wired list pulling custom object records. How can i introduce a variable unique to each row? I think that is why I was thinking if data could be used here.
    – swat
    Oct 20, 2022 at 16:37
  • @swat With a wire handler. @wire(method, {params}) handler({data, error}) { if(data) {this.questions = data.map((question)=>({...question, isExpanded: false })); }} There's lots of examples here on how to do that.
    – sfdcfox
    Oct 20, 2022 at 16:40
  • yes, I added a new variable and that helped/worked.
    – swat
    Oct 21, 2022 at 10:02
0

Use 'access-key' attribute inside template like below:

access-key={question.Id}

Now from 'handleclick(event)' function inside javascript, fetch the id like below:

const questionId = event.target.accessKey;
Improve this answer
1
  • This is a non-standard attribute. Perhaps you meant accesskey? Aside from that, this attribute has a specific purpose (to enable hotkeys to focus an item).
    – sfdcfox
    Oct 20, 2022 at 16:18

You must log in to answer this question.

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