我正在构建一个侧栏组件,该组件在单击侧栏项目之一时会更新活动链接。因此,我需要传递当前的侧边栏项目对象以启用其活动状态。
问题:如何在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
指令,但未成功。
我希望该代码在单击后可以更新当前活动的侧边栏项目。
答案 0 :(得分:3)
您需要将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>