Sightly: Including components in a loop.

Forum|Forum|2 years ago
April 14, 2023
2 replies
1017 views

Hi There,

I am including text component using slightly in for loop

</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

AsifChowdhuryAccepted solution

New Participant

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

Ravi_Pampana

New Participant

Hi,

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

lavishvasujaAuthor

New Participant

Hi Ravi,

I tried as you have suggested but not working.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded