Svelte 嵌套中的每个函数 Json

Question

我嵌套了JSON数组

let car = [
{
    name: "BMW",
    detail: [
        {name: headlight, type: flame},
        {name: taillight, type: spark},
    ],
},
{
    name: "Merced Benz",
    detail: [
        {name: headlight, type: spark},
        {name: taillight, type: flame},
    ],
},]

我打电话的时候显示的是车名 {#each car as cars} <p>{cars.name}</p> {/each}

但是当我打电话给 {cars.detail} 它的节目时 [object Object] 和当我打电话给 {cars.detail.name} 它的节目时 Undefined

我想叫每个细节的名字

请帮助我在 svelte 中使用每个功能谢谢之前

Answer 1

由于 detail 是一个数组，您还必须使用另一个 each 块来迭代它。

示例 (REPL)

<script>
  let cars = [
    {
      name: "BMW",
      detail: [
        { name: "headlight", type: "flame" },
        { name: "taillight", type: "spark" }
      ]
    },
    {
      name: "Mercedes-Benz",
      detail: [
        { name: "headlight", type: "spark" },
        { name: "taillight", type: "flame" }
      ]
    }
  ];
</script>

{#each cars as car}
  <div>{car.name}</div>
  {#each car.detail as detail}
    <div>{detail.name}: {detail.type}</div>
  {/each}
{/each}

Svelte 嵌套中的每个函数 Json

Svelte Each function in Nested Json

svelte