data-wp-each is there an iterator available?

[webconstructor]

I want to make accessable radiobuttons like in
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Id's can be used only once on a page.
So what I like to have available is an iterator like in vue.js which I can concatinate with some string in order to not have id's be more than once on the page.
Preferably in the html.

vue.js :

<li v-for="(item, index) in items">
   {{ index }} - {{ item.message }}
</li>

How should this be done?
I am looking voor some sort of template string like solution:

`somethingSpecific${iterator}`

Here some code of what it's use may look like.

<div data-wp-context='{"answers": ["yes","no","unknown"]}'>
	<template data-wp-each="context.answers">
		<label for="`somethingSpecific${iterator}`">
			<input type="radio" name="answers" 
                         data-wp-bind---id="`somethingSpecific${iterator}`"
                        > 
                         <span data-wp-text="context.item"></span>
		</label>
	</template>
</div>
<div data-wp-context='{"moreanswers": ["yes","no","unknown"]}'>
	<template data-wp-each="context.moreanswers">
		<label for="`somethingSpecific${iterator}`">
			<input type="radio" name="moreanswers" 
                         data-wp-bind---id="`somethingSpecific${iterator}`"
                         > 
                         <span data-wp-text="context.item"></span>
		</label>
	</template>
</div>

If there is a preferred way of doing this entirely different in the interactivity api I love to hear...

p.s.

what is the correct way to combine dynamic & static data:

data-wp-class="`wt-margin results block${context.item}`"

[luisherranz]

You can use derived state for that.

<div data-wp-context='{"answers": ["yes","no","unknown"]}'>
  <template data-wp-each="context.answers">
    <input data-wp-bind--id="state.myUniqueId" />
  </template>
</div>

store('myPlugin', {
  state: {
    get myUniqueId() {
      const { item } = getContext();
      return `somethingSpecific${item}`;
    },
  },
});

https://stackblitz.com/edit/interactivity-api-xsytbi-idboa9?file=index.html,main.js

Does that make sense?

[webconstructor]

This is a solution indeed.
I am very used to vue which is way more flexible in the html IMHO.

Thanx a bunch again!
Learned a ton.

p.s. the combing of flexible and fixed classnames should also be done in the derived state?

[luisherranz]

p.s. the combing of flexible and fixed classnames should also be done in the derived state?

It's not necessary, there is data-wp-class for that. If the directive evaluates to true, the class name is added, and if it evaluates to false, the class name is removed.

<div class="some-class" data-wp-class--another-class="context.value">...</div>

• If context.value is true, the class attribute is "some-class another-class".
• If context.value is false, the class attribute is "some-class".

Does that answer your question?

[webconstructor]

yes it does!
I was wondering if it would merge and it does.
thx