我正在构建一个侧边栏组件,当单击其中一个侧边栏项目时,该组件会更新事件链接。因此,我需要传递当前侧边栏项目对象以启用其事件状态。
问题:如何在 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
指令,但没有成功。
我希望代码能够在单击当前事件侧边栏项目后更新它。
最佳答案
您需要将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>
关于svelte - 绑定(bind)值传递给 :click callback (anchor tag),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55905788/