How to close popover on click on menu item?

Question

Vue.js

Good day!
The question is the following. There is a custom popover component that is used for the dropdown menu. Content is transferred to it as a slot, that is, a list of menu items. The popover is opened/closed by clicking on the "Menu" header or closed by clicking outside the component area. How to correctly throw the "click on the menu item" event so that the popover closes?

Answer 1

The main idea is that after clicking on an item after performing a certain action on it, you need to call the component's popover - close() method;
Implementation example:

<popover ref="popover">
    <ul v-for="item in items">
        <li @click="onClickOption(item)">Item 1</item>
        ...
    </ul>
</popover>

methods: {
  onClickOption(option) {
    // какие то действия
    this.$refs.popover.close();
  }
}