svelte - on:click コールバック (アンカー タグ) に渡すバインド値

Question

サイドバー項目の 1 つをクリックするとアクティブなリンクを更新するサイドバー コンポーネントを構築しています。したがって、アクティブな状態を有効にするには、現在のサイドバー アイテム オブジェクトを渡す必要があります。

質問: on:click イベントの後にコールバックに値を渡すにはどうすればよいですか? 通常のJavaScriptで行う方法は次のとおりです。

<script>
  const items = [
    {
      text: "Home",
      url: "/"
    },
    {
      text: "Workarea",
      url: "/workarea"
    },
    {
      text: "Notes",
      url: "/notes"
    },
    {
      text: "Conf",
      url: "/conf"
    }
  ];

function click(obj,e) {
  e.preventDefault()
  var activeItem = obj.id
}
</script>

//HTML

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    {#each items as item}
        <li class="list-group-item">
            <a 
            on:click={onItemClick}
            href={item.url}
            >{item.text}</a>
        </li>
    {/each}
  </ul>
</div> 

API を確認し、bind:xxxxディレクティブを使用しようとしましたが、成功しませんでした。

クリックした後、コードが現在アクティブなサイドバー項目を更新できることを期待しています。