Sightly: Including components in a loop. | Community
Skip to main content
lavishvasuja
lavishvasuja
Level 3
Apr 14, 2023 1:34 PM UTC
Solved

Sightly: Including components in a loop.

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
AsifChowdhury
AsifChowdhuryAccepted solution
New Participant
Apr 17, 2023 7:03 AM UTC

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 reply

3 replies

AsifChowdhury
AsifChowdhuryAccepted solution
New Participant
Apr 17, 2023 7:03 AM UTC

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

Translate
    Ravi_Pampana
    Ravi_Pampana
    New Participant
    Apr 14, 2023 10:11 PM UTC

    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>

    Translate
      lavishvasuja
      lavishvasujaAuthor
      Level 3
      Apr 15, 2023 6:27 AM UTC

      Hi Ravi,

       

      I tried as you have suggested but not working.

       

       

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...