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;
}
}