Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Sightly: Including components in a loop.

Avatar

Level 2

Hi There,

 

I am including text component using slightly in for loop

<div class="cmp-logo__item" v-if="logoList.length" v-for="(logo, index) in logoList">
 
<div class="testclass" data-sly-resource="${'title' @resourceType='constellar-core/components/title'}"></div>
</div>
 

but when text component render on the page it will render single id for all the text component, so only the last component is editable.  Can anyone suggest me on this.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @lavishvasuja,

You have taken the index in the v-for, so you can use it to set a variable to build a unique ID:

<sly data-sly-set.itemId="item-${index}"></sly>

 Then you can call the resource:

<sly data-sly-resource="${itemId @ resourceType='constellar-core/components/title'}"></sly>

you can try this manner hope it will work for you.

 

Thanks

View solution in original post

3 Replies

Avatar

Community Advisor

Hi,

You need to have unique value for the node name instead of constant when we are looping, something like below

<sly data-sly-resource="${'./title{0}' @ format=itemList.count, resourceType='/constellar-core/components/title}"></sly>

Avatar

Level 2

Hi Ravi,

 

I tried as you have suggested but not working.

 

 

Avatar

Correct answer by
Community Advisor

Hello @lavishvasuja,

You have taken the index in the v-for, so you can use it to set a variable to build a unique ID:

<sly data-sly-set.itemId="item-${index}"></sly>

 Then you can call the resource:

<sly data-sly-resource="${itemId @ resourceType='constellar-core/components/title'}"></sly>

you can try this manner hope it will work for you.

 

Thanks