Svelte - {#each} {/ each} генерирует уникальные идентификаторы в объекте, переданном компоненту - PullRequest
Новая
       2

Svelte - {#each} {/ each} генерирует уникальные идентификаторы в объекте, переданном компоненту

0 голосов
/ 23 апреля 2020

Я хочу создать список пользовательских компонентов, состоящий из поля ввода и нескольких флажков: 

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

Мне нужно передать уникальные значения tag.id в массив тегов на каждой итерации, чтобы флажки работали, но как этого добиться?

1 Ответ

1 голос
/ 23 апреля 2020

Вам не нужно этого делать. Проверьте этот ответ здесь . Вы можете просто поместить <input> внутрь <label>, тогда id / for не требуется: 

<div>
 {#each tags as tag (tag.id)}
   <div>
     <label>
      <input type="checkbox"/>
      {tags.label}
     </label>
   </div>
 {/each}
</div>

Рабочая демонстрация: 

<div>
  <label>
    <input type="checkbox">
    Click me, please!
  </label>
</div>
<div>
  <label>
    <input type="checkbox">
    No, click me instead!
  </label>
</div>
...