在 Svelte 中连接一组对象时，如何显示迭代计数？

Question

我正在 Svelte 的 onMount 方法的帮助下迭代 JSON。我已经在表格中显示了数据。

<script>
    import { onMount } from "svelte";

    const apiURL = "https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json";        
    let countries = [];
    
    onMount(async function() {
       const response = await fetch(apiURL);
       countries = await response.json();
    });

</script>

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Code</th>
    </tr>
  </thead>
  <tbody>
    {#if countries}
     {#each countries as country }  
     <tr>
      <td>{index + 1}</td>
      <td>{country.name}</td>
      <td>{country.code}</td>
     </tr>
     {/each}
    {:else}
    <p>There are no countries</p>
    {/if}
  </tbody>
</table>

我无法做的是添加一个迭代计数列。使用{index + 1}。

如何获得想要的结果？

Answer 1

索引是 svelte 中 each 循环的第二个参数

{#each countries as country, index }  
  <tr>
  <td>{index + 1}</td>
  <td>{country.name}</td>
  <td>{country.code}</td>
  </tr>
{/each}

这里是docs link