Frameork7-svelte event target

Questions
1

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

<List>
      {#each items as product, idx}
        <ListItem
          title={product.name"}
        >
          <span slot="after">
            <Button  idx={product.id} on:click={test}>test</Button>
          </span>
        </ListItem>
      {/each}
  </List>

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 ?

Thanks

2

Hi.

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}">
    <Row>
      <Col width="15">
      <Link onClick={()=>AddExtra(extra)} style="height:100%; text-align:center; display:block;" icon="fas fa-plus">Add</Link>
      </Col>
    </Row>
        
    </ListItem>
   {/each}
   </List>

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
3

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

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

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