Как закрыть popover по клику на пункт меню?

Question

[Степан Кормилин]

Доброго времени суток!
Вопрос собственно в следующем. Есть кастомный компонент popover, который используется для выпадающего меню. В него слотом передаётся контент, то есть список пунктов меню. Открытие/закрытие popover происходит по клику на заголовок "Меню" либо закрывается по клику вне области компонента. Как правильно прокинуть событие "клик на пункт меню", чтобы popover закрывался?

Answer 1

[lavezzi1]

Основная идея в том, что после нажатия на item после выполнения определенного действия на него, вам нужно вызывать метод компонента popover - close();

Пример реализации:

<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();
  }
}

Comments

[Степан Кормилин]

Дело в том, что в принципе popover ничего не знает о том, какой контент ему передают. То есть в нём я пропишу логику, что если передаётся event, то есть по типу :value='value' @input='value = $event', то нужно скрыть. Вот, а как это правильно передать и главное в popover поймать.

[lavezzi1]

Степан Кормилин, popover и не должен ничего знать о том, что вы передали. Items вашего меню должен генерить событие клика, в котором вы закрываете popover внутренним методом этого компонента.

[Степан Кормилин]

Тут как бы логика другая немного. Точнее она вся полностью прописана в компоненте popover. Мне в общем нужно в этот компонент как-то передать v-model и в нём дописать, что нужно сделать, если значение этого v-model меняется