Lightning input not able to render inside iteration

Question

I am trying to iterate a custom metadata to create input fields in the lightning layout item, however it is not rendering as expected, not sure what I am doing wrong.

Here is my code:

    <!-- START: Normal Search -->
<lightning-layout multiple-rows>
    <template for:each={filter} for:item="filterFields">
        <lightning-layout-item key={filter.Id} size="12" padding="around-small" small-device-size="12" medium-device-size="6"
            large-device-size="3">
            <lightning-input type="text" variant="standard" name="pid" label="PID:" placeholder="type PID here...">
            </lightning-input>
        </lightning-layout-item>
    </template>
</lightning-layout>
<!-- END: Normal Search -->

Below is the log I am getting in console.

Inside Connected Callback

batConsumerSearch.js:4 this.filterFields--->[{"Id":"m0D74000000GmbREAS","Filter_Label__c":"First Name","Filter_Section__c":"Basic","Filter_Type__c":"text"},{"Id":"m0D74000000GmbWEAS","Filter_Label__c":"Last Name","Filter_Section__c":"Basic","Filter_Type__c":"text"},{"Id":"m0D74000000GmbMEAS","Filter_Label__c":"PID","Filter_Section__c":"Basic","Filter_Type__c":"text"},{"Id":"m0D74000000GmbbEAC","Filter_Label__c":"Country","Filter_Section__c":"Basic","Filter_Type__c":"text","Default_Value__c":"US"}]

The lightning-input doesn't appear to be using any values from the "filterFields" item. What are you expecting to be rendered, and what is currently being rendered? — Phil W
– Phil W, Commented Nov 22, 2021 at 16:19

Benjamin Luehrs · Accepted Answer · 2021-11-22 18:51:37Z

The above answer almost has it. You need to switch your for:each and for:item:

<lightning-layout multiple-rows>
    <template for:each={filterFields} for:item="filter">
        <lightning-layout-item key={filter.Id} size="12" padding="around-small" small-device-size="12" medium-device-size="6"
            large-device-size="3">
            <lightning-input type="text" variant="standard" name="pid" label="PID:" placeholder="type PID here...">
            </lightning-input>
        </lightning-layout-item>
    </template>
</lightning-layout>

glls · Accepted Answer · 2021-11-22 17:20:20Z

0

in your HTML template:

<template for:each={filter} for:item="filterFields">

the

filter => Array property

filterFields is the property you should use within the iteration, which you are not doing.

key={filter.Id} should be key={filterFields.Id}

You seem to have mixed your property declaration in the directive.

answered Nov 22, 2021 at 17:20

glls

20.4k20 gold badges50 silver badges84 bronze badges

Add a comment |

Stack Exchange Network

Lightning input not able to render inside iteration

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Lightning input not able to render inside iteration

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions