Unable to open popover on a targeted element

Since in v6 we are discouraged to use .open() methods of Popups and Popovers, I tried setting the target-el prop on the popover to dynamically set the targeted element. But neither passing $event.target or by CSS selector worked.

Does not work

<f7-popover :target-el="PopoverTarget" ...

this.PopoverTarget = $event.target;
- or -
this.PopoverTarget = '#' + $event.target.id;

- or -
let Popover = f7.popover.get('.popover');

Popover.$targetEl = $event.target;

I’ve checked the console, $event.target is a proper element.

The only way I was able to open the Popover is by using .open($event.target) method.

It can not be set initially, if you get target el later, then use what use with .open method

Thanks for the reply. Please consider implementing dynamic target-el prop feature. This feature was very handy in other frameworks I’ve worked with.

1 Like