如何将项目从每个循环传递到函数

时间:2019-06-24 12:07:34

标签: svelte

我有一个包含以下内容的组件:

{#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}的功能而无法正常工作。我试过用引号引起来,但这也不起作用。

1 个答案:

答案 0 :(得分:3)

通过编写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}