Svelte шаблоны: петли

Узнайте, как работать с циклами в шаблонах Svelte

В шаблонах Svelte вы можете создать цикл, используя{#each}{/each}синтаксис:

<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog}
<li>{goodDog}</li>
{/each}

Если вы знакомы с другими фреймворками, использующими шаблоны, это очень похожий синтаксис.

Вы можете получить индекс итерации, используя:

<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog, index}
<li>{index}: {goodDog}</li>
{/each}

(индексы начинаются с 0)

При динамическом редактировании списков, удаляя и добавляя элементы, вы всегда должны передавать идентификатор в списках, чтобы предотвратить проблемы.

Вы делаете это, используя следующий синтаксис:

<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog (goodDog)}
<li>{goodDog}</li>
{/each}
<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog)}
<li>{goodDog}</li>
{/each}

Вы также можете передать объект, но если в вашем списке есть уникальный идентификатор для каждого элемента, лучше использовать его:

<script>
let goodDogs = [
  { id: 1, name: 'Roger'},
  { id: 2, name: 'Syd'}
]
</script>
{#each goodDogs as goodDog (goodDog.id)}
<li>{goodDog.name}</li>
{/each}
<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog.id)}
<li>{goodDog.name}</li>
{/each}

Скачать мою бесплатнуюСправочник Svelte

Svelte шаблоны: петли

Узнайте, как работать с циклами в шаблонах Svelte

Более стройные уроки: