要传递给 on:click 回调（锚标记）的绑定值

Question

我正在构建一个边栏组件，当单击其中一个边栏项目时，它会更新活动 link。因此，我需要向下传递当前侧边栏项对象以启用其活动状态。

问题：如何在 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 指令但没有成功。

我希望代码能够在点击后更新当前活动的边栏项目。

Answer 1

您需要将 item 传递给您的处理程序：

<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(item)}
          href={item.url}
        >{item.text}</a>
      </li>
    {/each}
  </ul>
</div>

要传递给 on:click 回调（锚标记）的绑定值

Binding values to pass to a on:click callback (anchor tag)

svelte