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. Commented 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. Commented Oct 20, 2022 at 16:40
  • yes, I added a new variable and that helped/worked. Commented 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). Commented Oct 20, 2022 at 16:18

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.