如何将每个循环中的项目传递给函数

Question

我有一个组件包含：

{#each menuItems as item}
<div  class="menu-item {item.selected ? 'selected' : ''}" on:click={select(item)}>
    ...stuff...
</div>
{/each}

menuItems 是一个对象数组：

$: menuItem = [{
id: 'abc',
selected: true,
}]

我有一个名为 select 的函数，它需要从每个循环中获取项目作为参数。我该怎么做？由于 on:click 需要像 on:click={submit} 这样的函数，因此当前的示例不起作用。我在引号内试过，也没用。

Answer 1

通过编写 on:click={select(item)}，您将直接在渲染上调用 select 函数。你想给 on:click 一个函数引用，你可以通过为循环中的每个项目创建一个新的内联函数来实现。

示例 (REPL)

<script>
  const menuItems = [
    {
      id: 'abc',
      selected: true
    },
    {
      id: 'def',
      selected: false
    }
  ];

  function select(item) {
    alert(item.id);
  }
</script>

{#each menuItems as item}
  <div
    class="menu-item {item.selected ? 'selected' : ''}"
    on:click={() => select(item)}
  >
    {item.id}
  </div>
{/each}

如何将每个循环中的项目传递给函数

How to pass the item from an each loop into a function

svelte