I want to generate a list of custom components , composed of an input field and a few checkboxes:
<script>const messages = [ { id: "2fzae4", text: "aaaaa"}, { id: "456ndr", text: "bbbbb"}];const tags = [ { id: "01", label: "Twitter"}, { id: "02", label: "Instagram"}];</script><ul>{#each messages as msg (msg.id)}<li><Ainput textField={msg.text} {tags}/></li>{/each}</ul>
// This is a part of the <Ainput> component <div class="wrapper"><input type="text" bind:value={textField}/><Tag {tags} /></div>
// Tag component, a set of checkboxes<script> export let tags;</script><div> {#each tags as tag (tag.id)}<div><checkbox id="{tags.id}"/><label for="{tags.id}">{tags.label}</label></div> {/each}</div>
I need to pass down unique tag.id values in the array 'tags' on every iteration to make checkboxes work, but how to achieve this?