Apex Code Development You need to sign in to do that
Don't have an account?
mahamed raheem conditional rendering in lwc
I have to display fields on condition-based
if type equals text then I have to display text fields
<template for:each={questions} for:item="qs">
<div key={qs}>
<template if:true={qs.type='multiselect'}>
<lightning-dual-listbox name="duallist" label="multiselect" source-label="Available" selected-label="Selected"
options={options}
onchange={handleMultiselectChange}></lightning-dual-listbox>
</template>
<template if:true={qs.type='dropdown'}>
<lightning-combobox name="combobox" label="dropdown" value={value} placeholder="Select" options={options}
onchange={handleDropdownChange} ></lightning-combobox>
</template>
<template if:true={qs.type='checkbox'}>
<lightning-input type="checkbox" label="checkbox" name="checkbox"></lightning-input>
</template>
<template if:true={qs.type='text'}>
<lightning-input type="text" label="text" name="text"></lightning-input>
</template>
</div>
</template>>
Please help me on this
if type equals text then I have to display text fields
<template for:each={questions} for:item="qs">
<div key={qs}>
<template if:true={qs.type='multiselect'}>
<lightning-dual-listbox name="duallist" label="multiselect" source-label="Available" selected-label="Selected"
options={options}
onchange={handleMultiselectChange}></lightning-dual-listbox>
</template>
<template if:true={qs.type='dropdown'}>
<lightning-combobox name="combobox" label="dropdown" value={value} placeholder="Select" options={options}
onchange={handleDropdownChange} ></lightning-combobox>
</template>
<template if:true={qs.type='checkbox'}>
<lightning-input type="checkbox" label="checkbox" name="checkbox"></lightning-input>
</template>
<template if:true={qs.type='text'}>
<lightning-input type="text" label="text" name="text"></lightning-input>
</template>
</div>
</template>>
Please help me on this
i.e.
<template if:true={qs.multiselect}>
All Answers
Please see the following example to render DOM Elements Conditionally
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_conditional
Anudeep
<template if:true={qs.type='multiselect'}> would not work.
I would suggest add a few Booleans in Wapper class of "question".
boolean isMultiSelect;
boolean isText; and etc.
then change your HTML to:
<template if:true={isMultiSelect'}> , etc
I have tried the same thing but my for:each iterations values are coming duplicate
<template for:each={question} for:item="qs">
<div key={qs.id}>
<template if:true={multiselect}>
<lightning-dual-listbox name="duallist" label={qs.label} source-label="Available" selected-label="Selected"
options={options}
onchange={handleMultiselectChange}></lightning-dual-listbox>
</template>
<template if:true={dropdown}>
<lightning-combobox name="combobox" label={qs.label} value={value} placeholder="Select" options={options}
onchange={handleDropdownChange} ></lightning-combobox>
</template>
<template if:true={checkbox}>
<lightning-input type="checkbox" label={qs.label} name="checkbox"></lightning-input>
</template>
<template if:true={text}>
<lightning-input type="text" label={qs.label} name="text"></lightning-input>
</template>
</div>
</template>
----Js---
this.question=result;
for (let i = 0; i < result.length; i++) {
dataType.push(result[i].type);
}
if(dataType.includes("Multi Select")){
this.multiselect=true;
}else {
this.multiselect=false;
}
if(dataType.includes("Dropdown")){
this.dropdown=true;
}else{
this.dropdown=false;
}
if(dataType.includes("Checkbox")){
this.checkbox=true;
}else{
this.checkbox=false;
}
if(dataType.includes("Text")){
this.text=true;
}else{
this.text=false;
}
})
i.e.
<template if:true={qs.multiselect}>