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

Как передать массив в шаблон 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>

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


2 811
1

Ответ:

Решено

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

import App from './App.html';

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