1

I have a Apex method which returns the list of wrapper class as JSON string

having LWC js controller to call the method in connnectedCallback() and the wrapper list is assigned to a property this.coreAttributes which is show in html page using basic html tags along with other property defined in LWC noOfBlocks, faltHierarchy, and one more. code given below.

When I enter some value in coreAttribute's related input filed and enter some value in noOfBlocks input field, the value entered in the coreAttribute related fields are gone. please check the attached gif and help me to resolve this.

Image : https://easyupload.io/g1h772

@AuraEnabled(cacheable=true)
    public static String queryCoreAttributes() {
        List<Core_Attribute__c> coreAttributesList = new List<Core_Attribute__c>();
        Map<Id,List<String>> picklistValuesToPicklistMasterMap = new Map<Id,List<String>>();

        coreAttributesList = [SELECT Id, Name, Data_Type__c, Type__c, Picklist_Master__c 
            FROM Core_Attribute__c WHERE Base_Asset_Name__c IN (SELECT Id FROM Base_Asset_Template__c WHERE Name = 'Base PV Plant') 
            ORDER BY Name ASC];

        picklistValuesToPicklistMasterMap = Utils.getPicklistValues(); 

        System.debug(' picklistValuesToPicklistMasterMap '+ picklistValuesToPicklistMasterMap);

        List<coreAttributesWrapper> coreAttributesWrapperList = new List<coreAttributesWrapper>();
        for(Core_Attribute__c coreAttribute : coreAttributesList){
            coreAttributesWrapper coreAttWrapper = new coreAttributesWrapper();
            coreAttWrapper.attributeHeader = coreAttribute.Name;
            coreAttWrapper.attributeDataType = coreAttribute.Data_Type__c.toLowerCase();
            coreAttWrapper.picklistValues = (coreAttribute.Data_Type__c == 'Picklist') ? picklistValuesToPicklistMasterMap.get(coreAttribute.Picklist_Master__c): null;
            coreAttWrapper.isPicklist = (coreAttribute.Data_Type__c == 'Picklist');
            coreAttWrapper.attributeValue = '';
            coreAttributesWrapperList.add(coreAttWrapper);
        }
        System.debug(' core Att '+ coreAttributesWrapperList);
        return JSON.serialize(coreAttributesWrapperList);
    }

JS

import { LightningElement, track, api } from "lwc";
import getPlantAssetRecord from "@salesforce/apex/P1PlantInfoPromptSolar.queryPlantAssetRecord";
import queryCoreAttributes from "@salesforce/apex/P1PlantInfoPromptSolar.queryCoreAttributes";
import saveP1PlantInfoPromptMetadata from "@salesforce/apex/P1PlantInfoPromptSolar.saveP1PlantInfoPromptMetadata";

export default class P1PlantInfoPromptSolar extends LightningElement {
  @api plantAssetId='';
  @track plantAssetDetail;
  @track coreAttributes;
  @track noOfBlocks='';
  @track flatHierarchy=false;
  @track drivePlus=false;
  @track promptSpecificAttributes;
connectedCallback() {
    console.log(' connected callback ');
    getPlantAssetRecord({
        recordId: 'a060p000001hGLxAAM',
    })
    .then(result => {
      this.plantAssetDetail = result;
    })
    .catch(error => {
      this.error = error;
    });

    queryCoreAttributes()
    .then(result => {
      console.log(' result ' + result);
      console.log(' JSON result ' + JSON.parse(result));
      this.coreAttributes = JSON.parse(result);
    }) 
    .catch(error => {
      this.error = error;
    });
  }

inputTagValueChangeHandler(event){
    console.log(' test '+ JSON.stringify(this.coreAttributes));
    console.log(' value -> '+ event.target.value + ' name -> ' + event.target.name);

    if(event.target.name === 'Blocks') this.noOfBlocks = event.target.value;
    if(event.target.name === 'Flat Hierarchy') this.flatHierarchy = event.target.value;
    if(event.target.name === 'Drive+') this.drivePlus = event.target.value; 
  }

HTML


    <tr data-row="1">
                  <th># Blocks</th>
                  <td><input type="number" name="Blocks" 
                    value={noOfBlocks} onchange={inputTagValueChangeHandler}/></td>
                </tr>
                <tr data-row="2">
                  <th>Flat Hierarchy</th>
                  <td><input type="checkbox" name="Flat Hierarchy" 
                    value={flatHierarchy} onchange={inputTagValueChangeHandler}/></td>
                </tr>
                <tr data-row="2">
                  <th>Drive+</th>
                  <td><input type="checkbox" name="Drive+" 
                    value={drivePlus} onchange={inputTagValueChangeHandler}/></td>
                </tr>
    <template for:each={coreAttributes} for:item="coreAttribute">
                  <tr key={coreAttribute.key}>
                    <th>{coreAttribute.attributeHeader}</th>
                    <td>
                      <template if:false={coreAttribute.isPicklist}>
                        <input type={coreAttribute.attributeDataType} name={coreAttribute.attributeHeader}
                         value={coreAttribute.attributeValue}/>
                      </template>
                      <template if:true={coreAttribute.isPicklist}>
                        <select size="1" name={coreAttribute.attributeHeader}>
                          <option value="None">--None--</option>
                          <template for:each={coreAttribute.picklistValues} for:item="attributePickValues">
                            <option key={coreAttribute.key} value={coreAttribute.attributeValue}>{attributePickValues}</option>
                          </template>
                        </select>
                      </template>
                    </td>
                  </tr>
                </template>

1
  • I figured out the issue, it is because, in onchange event im assigning the event.target.value to the same variable @tracked and shown on screen. when we try to assign a value to @tracked variable the screen refreshing the all @track variable. Anyway, Im not sure about the reason but after removing this assignment if(event.target.name === 'Blocks') this.noOfBlocks = event.target.value; and assign the vale to a normal variable it works fine. Commented May 29, 2020 at 13:55

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.