Frameork7-svelte event target

I have a button on each of the list items of a simple list. How do I know which item I clicked?

      {#each items as product, idx}
          <span slot="after">
            <Button  idx={} on:click={test}>test</Button>

In standard svelte, I can get the idx by the following function.

function test(e){
let idx = e.currentTarget.getAttribute(‘idx’);

but in frameork7-svelte, the e.currentTarget is always null,

What is the prefered way to acheve this ?



This is what I do, there might be better ways to do it though.

<List mediaList>
   {#each ExtrasList as extra, i (extra.ExtraID)}
    <ListItem value="{extra.ExtraID}">
      <Col width="15">
      <Link onClick={()=>AddExtra(extra)} style="height:100%; text-align:center; display:block;" icon="fas fa-plus">Add</Link>

And then your function:

function AddExtra(selextra){

  var extra = {};
  extra.ExtraID = selextra.ExtraID;


So you can either pass the whole object to the function or just the ID that is what you are after.

1 Like

Components are not DOM elements, so no can be there, use what @onlyspike suggests:

<Button  id={} on:click={() => test(}>test</Button> 

I end up with patching button.svelte of framework7-svelte, add the e as a paramter, then the currentTarget is avialable.

 function onClick(e) {
    dispatch('click', e);
    if (typeof $$props.onClick === 'function') $$props.onClick();

But I like @onlyspike idea better, will try that next time