1

I have an LWC in which I need to check the value of a field in a for:each loop to determine what to display in the HTML. I've tried to find a solution but haven't had success so am hoping someone will be able to help me.

This is the HTML - the <template lwc:if={ checks in the loop I know are wrong, but I've added it like this to show what I'm needing:

<template lwc:if={questions}>
    <template for:each={questions} for:item="q">
        <div key={q.Id} class="slds-grid slds-box">
          <div class="slds-col slds-size_1-of-2">
            <p>{q.Question_Number__c}.  {q.Question__c}</p>
          </div>
          <div class="slds-col slds-size_1-of-2">
            <template lwc:if={q.Answer_Type__c = "short text"}>
              <lightning-input-field field-name="mytext"> </lightning-input-field>
            </template>
            <template lwc:if={q.Answer_Type__c = "formatted text"}>
              <lightning-formatted-text field-name="mytext"> </lightning-formatted-text>
            </template>
            <template lwc:if={q.Answer_Type__c = "bank no"}>
              <lightning-formatted-number field-name="mybanknumber"> </lightning-formatted-number>
            </template>
            <template lwc:if={q.Answer_Type__c = "checkbox group"}>
              <lightning-checkbox-group name="Checkbox Group"
                          label="Checkbox Group"
                          options={options}
                          value={value}
                          onchange={handleChange}></lightning-checkbox-group>
            </template>
          </div>
        </div>
    </template>
</template>

I assume I need to create a getter in my js something like this

get isTextShort() {
  return this.questions.Answer_Type__c === "Short text";
}

and do the template condition like this <template lwc:if={isTextShort}>, then it would work, not so? But I don't know how to access the field content in the getter return this.questions ==. What do I use instead of this.questions.Answer_Type__c?

The @wire:

@api recordId;

@track questions=[];

@wire(getQuestions, { questId: "$recordId" })
    results({ error, data }) {
    if (data) {
      this.questions = data;
      this.error = undefined;
    } else if (error) {
      console.log('recordId: ', this.recordId);
      this.error = error;
      this.questions = undefined;
    }
}

1 Answer 1

2

The easiest thing to do would be to make a child component inside of your foreach. That way you can add a getter for just the item that is being iterated on.

Alternatively, since you currently can't do template expressions, you could add boolean attributes to each question that's being iterated and reference that in your component.

I would personally lean towards a child component for this.

2
  • 1
    Thanks, I created a child component and it works nicely :)
    – Irene
    Commented Mar 16, 2023 at 4:10
  • @Irene can you please show how the second component is implemented ?
    – karthik
    Commented Jun 5 at 9:44

You must log in to answer this question.

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