0

I am trying to add and remove rows in LWC, but every time when I click the tile it just add two tiles of that in another component.

So every time when I click on the second tile it just losing its first record Id. How would I achieve that when I click on the second picture then it should be in the second row.

  @api recordId;

  @api objectRecordId;

  selectedName;

  productName;
  productPrice;
  productInfo;
  productImage;
  noOfProducts = 0;
  totalCost = 0;
  pricebookEntryId;
  prodId;
  tempProdId;

  subscription;
  addUserModal = false;

  keyIndex = 0;
  @track itemList = [
    {
      recordId: 0
    }
  ];
    connectedCallback() {
    this.subscription = subscribe(
      this.messageContext,
      PRODUCT_SELECTED_MESSAGE,
      (message) => this.handleProductSelected(message.productId)
    );
  }
    handleProductSelected(productId) {
    var cartObj = {};
    var objOfCartObj = {};
    var newItem = [];
    this.recordId = productId;
    getProductInfo({ recordId: this.recordId }).then((data) => {
      this.productInfo = data;
      for (var i = 0; i < this.productInfo.length; i++) {
        this.productImage = this.productInfo[0].Product2.Picture_URL__c;
        this.productName = this.productInfo[0].Product2.Name;
        this.productPrice = this.productInfo[0].UnitPrice;
        this.pricebookEntryId = this.productInfo[0].Id;
        this.prodId = this.productInfo[0].Product2Id;
      }
      this.totalCost = this.totalCost + this.productPrice;
      
      if(this.keyIndex == 0){
        this.keyIndex++;
        newItem = [{ recordId: this.keyIndex }];
        this.noOfProducts = this.noOfProducts + 1;
      }
      if(this.tempProdId == this.prodId){
        this.noOfProducts = this.noOfProducts + 1;
        
      }
      if(this.tempProdId != null && this.tempProdId != this.prodId){
        newItem = [{ recordId: this.keyIndex }];
        this.itemList = this.itemList.concat(newItem);
        this.noOfProducts = this.noOfProducts + 1;
        this.keyIndex++;
      }
      this.tempProdId = this.prodId;
      
      cartObj = {
        productId: this.prodId,
        prodName: this.productName,
        prodPriceList: [
          {
            pricebookId: this.pricebookEntryId,
            productId: this.prodId,
            prodPrice: this.productPrice,
            qty: this.noOfProducts,
          },
        ],
      };
    });
  }
deleteRow() {
    
  }


<template>
<lightning-card icon-name="standard:checkout">
    <span slot="title">Cart</span>
    <template if:true={recordId}>
        <template for:each={itemList} for:item="item" for:index="index">
        <div class="slds-grid slds-gutters" key={recordId}>
            <div class="slds-col">
              <span>
                <img src={productImage} class="product slds-align_absolute-center" alt="Issue occured at our end, try refreshing your page"/>&nbsp;
              </span>
            </div>
            <div class="slds-col">
              <span>
                X {noOfProducts}
              </span>
            </div>
            <div class="slds-col">
              <span>
                Price:&nbsp;
                <lightning-formatted-number
                    format-style="currency"
                    currency-code="USD"
                    value={productPrice}
                    class="price">
                </lightning-formatted-number>
              </span>
            </div>
            <div class="slds-col">
                <span>
                    <lightning-button-icon icon-name="utility:delete" variant="container" alternative-text="Delete" class="slds-m-left_xx-small" title="Delete" onclick={deleteRow} access-key={recordId} id={index}></lightning-button-icon>
                </span>
            </div>
        </div>
        </template>
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_2-of-3">
                <div class="slds-m-left_x-small">
                    <span>
                    <p>Total</p>
                    </span>
                </div>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <span>
                    <lightning-formatted-number
                        format-style="currency"
                        currency-code="USD"
                        value={totalCost}
                        class="price">
                    </lightning-formatted-number>
                </span>
            </div>
        </div>
    </template>
    <template if:false={recordId}>
        <p class="slds-align_absolute-center">Select a product to see details</p>
    </template>
</lightning-card>
<lightning-input type="text" value={tempProdId} class="slds-hide"></lightning-input>
6
  • 1
    this.recordId = productId; will cause an exception because recordId is immutable. You need to keep your public properties separate from your private ones. Unfortunately, you have a lot of code here so I'm not sure if this will completely solve your problem - hence I'm not putting this as an answer. – Caspar Harmer May 6 at 18:12
  • So, what should I do? How would I separate this? – H John May 6 at 18:16
  • @H John, too much code, please provide a minimal reproduceable code sample. quick tip, whatever you chose to display, store in a mutable property, where you can add/remove objects to display. – glls May 6 at 18:32
  • @glls I have removed unnecessary code. – H John May 7 at 4:46
  • @CasparHarmer I have also tried with getter and setter methods as you have mentioned but I am getting the same result – H John May 7 at 4:48
2

If you need recordId to be set externally - and internally (using @api) - and I'm not sure you do, then you would generally use getter/setter combo and a private internal var. Eg:

_recordId
@api
get recordId() {
  return this._recordId;
}
set recordId(value) {
  this._recordId = value;
}

You would then use this._recordId for all other references to recordId.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.