如何遍历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'}]
  }
});