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

How to loop through an array of objects in a Svelte template?