0

When I clicked Add button (below method is called)

 addSectionRecordRow(){
    this.skeyIndex+1;
    this.addSectionRecord.push({
       
            section:'', 
              sort:'',
              Question:[{

                question: '',
                sort : ''
               }]
     });
   }

its create rows every time when it clicked please check image

The problem is when i clicked on Plus button to add more rows per section (one Section have multiple rows) these rows added to all section.Evertimes its create new row to all section by one click

addQuestionRow(){
     
        ++this.keyIndex;
      
       this.getQuestionRecord.push({
          question:'',
          sort:''
        })

let suppose i want to add 3 rows in section 1 and 5 rows in section 2 so on . how its possible Kindly chcek the code

<template>
    <lightning-card title="Coaching Template">
        <div class=" slds-var-m-around_small slds-box slds-theme_shade ">
         <div class=" slds-p-left_xx-large">
            <table>
         <tr>
             
             <td>
                 <div class="slds-p-left_x-large slds-col slds-size_5-of-6">
                 <lightning-input type="text" label="Name"></lightning-input>
                 </div>
             </td>
              <td>
                     <div class=" slds-p-left_x-large slds-col slds-size_5-of-6">
                     <lightning-input type="text" label="Type"></lightning-input>
                     </div>
                 </td>
             </tr>
 
             <tr>
             
                 <td>
                     <div class="slds-p-left_x-large slds-col slds-size_5-of-6">
                     <lightning-input type="date" label="Start Date"></lightning-input>
                     </div>
                 </td>
                  <td>
                         <div class=" slds-p-left_x-large slds-col slds-size_5-of-6">
                         <lightning-input type="text" label="Active"></lightning-input>
                         </div>
                     </td>
                 </tr>
                 <tr>
             
                     <td>
                         <div class="slds-p-left_x-large slds-col slds-size_5-of-6">
                         <lightning-input type="date" label="End date "></lightning-input>
                         </div>
                     </td>
                      <td>
                             <div class=" slds-p-left_x-large slds-col slds-size_5-of-6">
                                <template if:true={countryValues.data}>
                                    <lightning-combobox name="progress" label="Lead Source" value={value}
                                        options={countryValues.data.values} onchange={handleChange}>
                                    </lightning-combobox>
                                    </template>
                             </div>
                         </td>
                     </tr>
               
            </table>
       </div>
        </div>
        </lightning-card>
     <lightning-card  title="Question Template">
       
             <lightning-button  style="padding-right:110px ;" label="Add" slot="actions" onclick={addSectionRecordRow}>
             </lightning-button>
             <template for:each={addSectionRecord} for:item="sItem" for:index="index">
                 
                 <div key={sItem.id}>
             <div class=" slds-var-m-around_small slds-box slds-theme_shade " >
                 <div class=" slds-p-left_xx-large">
                   
                     <table>
                  <tr>
                      
                      <td>
                      <div class="slds-p-left_x-large slds-col slds-size_5-of-6">
                          <lightning-input type="text" label="Section"></lightning-input>
                          </div>
                      </td>
                       <td>
                              <div class=" slds-p-left_x-large slds-col slds-size_5-of-6">
                              <lightning-input type="text" label="Sort"></lightning-input>
                              </div>
                          </td>
                      </tr>
                       
                          </table>
                          </div>
        
 
                         
 
             </div>
             
             <div class="c-container">
                 <template for:each={getQuestionRecord} for:item="item" for:index="index">
                 <lightning-layout horizontal-align="stretch" key={item.question}>
                     <lightning-layout-item padding="around-small" size="5">
                         <div style="padding-left: 150px;margin-left: 60px;">
                             <lightning-input type="text" label="Question" onlcik={changeHandler} access-key={index} id={index} ></lightning-input>
                         </div>
                     </lightning-layout-item>
                     <lightning-layout-item padding="around-small" size="5"> 
                         <div style="padding-left:200px;"  >
                            
                             <lightning-input type="text" label="Sort" onlcik={changeHandler} access-key={index} id={index} ></lightning-input>
                         </div>
                     </lightning-layout-item>
 
                     <lightning-layout-item
                     size="1" >
                     <div class="slds-p-top_x-large">
                         <lightning-icon icon-name="action:new" 
                             alternative-text="Add Row" data-record-id={index}  size="small" title="Add Row" onclick={addQuestionRow}>
                         </lightning-icon>
                         <lightning-icon icon-name="action:delete" 
                             alternative-text="Delete Row" size="small" title="Delete Row"  access-key={item.id} id={index} onclick={removeRow}>
                         </lightning-icon>
                     </div>
                 </lightning-layout-item>
                     </lightning-layout>
                 </template>
                 </div>
                </div>
                </template>
         </lightning-card>         
         
         
         
  </template>

js


export default class CoachingTemplate extends LightningElement {
    
   
    @wire(getObjectInfo, { objectApiName: Coaching_Templates_OBJECT })
    contactInfo;

    @wire(getPicklistValues,
        {
            recordTypeId: '$contactInfo.data.defaultRecordTypeId',
            fieldApiName: Country
        }
    )
    countryValues;


    skeyIndex = 0
    qkeyIndex = 0
   


    @track addSectionRecord = [
      {
        
           section : '',
           sort : '',
         
              
      }
    ];


  @track getQuestionRecord=
  [{
       question:'',
       sort:''
           
 }];
    addSectionRecordRow(){
    this.skeyIndex+1;
    this.addSectionRecord.push({
       
            section:'', 
              sort:'',
              Question:[{

                question: '',
                sort : ''
               }]
     });
   }


     addQuestionRow(){
 
        ++this.keyIndex;

       this.getQuestionRecord.push({
          question:'',
          sort:''
        })
        
       
    
  }
     
      
    changeHandler(event){
      console.log('changehandler');
  if(event.target.name ==="question"){
   
 this.getQuestionRecord[event.target.accessKey].question = event.target.value;
  }else{
    this.getQuestionRecord[event.target.accessKey].sort = event.target.value;
  }

  }
      
   
}
Improve this question

1 Answer 1

Reset to default
1

You need to have multiple variables to store the data separately. That means that addSectionRecord needs to have a property for the questions, and that needs to have a property for the answers.

Here's an example:

  nextSectionId = 1
  nextQuestionId = 1
  nextAnswerId = 1
  sections = [
    { 
      id: 0, 
      questions: [
        { 
          id: 0,
          answers: [
            { 
              id: 0
            }
          ]
        }
      ]
    }
  ]

The elements are then nested together:

<div for:each={sections} for:item="section" key={section.id} data-section-id={section.id}>
    <div class="slds-grid slds-p-horizontal_small">
        <lightning-input class="slds-size_10-of-12" label="Section" value={section.value} onchange={updateSection}>
        </lightning-input>
    </div>
    <div for:each={section.questions} for:item="question" key={question.id} data-question-id={question.id}
        onchange={updateQuestion}>
        <div class="slds-grid slds-p-horizontal_medium">
            <lightning-input label="Question" value={question.value} class="slds-size_10-of-12" onchange={updateQuestion}>
            </lightning-input>
        </div>
        <div class="slds-grid slds-p-horizontal_large" for:each={question.answers} for:item="answer" key={answer.id}
            data-answer-id={answer.id} onchange={updateAnswer}>
            <lightning-input class="slds-size_10-of-12" label="Answer" value={answer.value} onchange={updateAnswer}>
            </lightning-input>
        </div>
    </div>
</div>

You then need to do recursive searches to find elements for updating each section, question, and answer.

I wrote a complete demo for you to check out.

Improve this answer

You must log in to answer this question.