Sightly: Including components in a loop. | Community
Skip to main content
lavishvasuja
lavishvasuja
Level 3
April 14, 2023
Solved

Sightly: Including components in a loop.

  • April 14, 2023
  • 2 replies
  • 1020 views

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.
Best answer by AsifChowdhury

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

2 replies

Ravi_Pampana
Community Advisor
Ravi_PampanaCommunity Advisor
Community Advisor
April 14, 2023

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
    lavishvasujaAuthor
    Level 3
    April 15, 2023

    Hi Ravi,

     

    I tried as you have suggested but not working.

     

     

      AsifChowdhury
      Community Advisor
      AsifChowdhuryCommunity AdvisorAccepted solution
      Community Advisor
      April 17, 2023

      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

        Terms & ConditionsAccessibility statement

        Loading footer...