Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Svelte - {#each} {/each} generating unique ids in an object passed down to component

$
0
0

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?


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>