How to move menu to another html element in vue?

Question

JavaScript

Hello.
I have multiple blocks on a page. Each of them contains a button and a menu. All menus will be completely identical, so I thought it was a good idea to create just one and show it inside the desired block.
I have two ideas on this:
1) Move the html code of the menu (for example, as the append method in jquery does)
2) Use absolute positioning, get the parent's coordinates and update them on the resize event
Tell me how to do it correctly on vue ? Demo with buttons and one menu

Answer 1

You don't need to move anything. Make a component, and let there be only one open menu .