Как перебрать массив объектов в шаблоне Svelte?

Question

Как передать массив в шаблон Svelte и перебрать содержимое?

Мой main.js выглядит так:

import App from './App.html';

const app = new App({
  target: document.body,
  data: [{name: 'hello'}, { name: 'world'}]
});

export default app;

Мой файл App.html выглядит так:

{#each cats as cat}
    <h1>Hello {cat.name}!</h1>
{/each}

<style>
    h1 {
        color: purple;
    }
</style>

Кажется, это должно работать ... но ничего не появляется. Я пробовал двойные фигурные скобки для каждого шаблона.

Answer 1

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

import App from './App.html';

const app = new App({
  target: document.body,
  data: {
    cats: [{name: 'hello'}, { name: 'world'}]
  }
});