Sightly: Including components in a loop.

[lavishvasuja]

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.

[Ravi_Pampana]

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>

[lavishvasuja]

Hi Ravi,

I tried as you have suggested but not working.

[AsifChowdhury · Accepted solution]

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