How to add a button in list-item's "after" slot?

I have a f7-list-item component with link parameter, i.e. clickable list item.
When adding <f7-button slot="after" @click.stop.prevent="clicked()"> and clicking this button I see that material ripple animation on this button, but also the whole list item receives this click and becomes grayed (it’s a.item-link gets active-state class), which is not desired behaviour.

What is the right way to add a button to a list item to get correct user experience of clicking just a button but not a list item itself?

  1. Add prevent-active-state-propagation to button
  2. Add type="button" to button
  3. Use only single click handler on parent list-item and check for in its handler to detect was it button clicked or not