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}
. 我试过用引号括起来,但也没有用。
解决方案
通过编写,您可以直接在渲染上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}