Предотвратить закрытие Vue bootstrap после нажатия кнопки

Question

Как изменить поведение кнопки b-dropdown-item внутри компонента b-dropdown, чтобы она не закрывалась автоматически при нажатии на нее?

Раскрывающееся меню имеет синтаксическую структуру следует:

<b-dropdown>
    <b-dropdown-item-button>
        <span>Mark as read</span>
    <b-dropdown-item-button>

    <b-dropdown-group>
// Messages are output here
    </b-dropdown-group>
</bdropdown>

Теперь мне интересно, как я могу предотвратить закрытие выпадающего меню, когда нажимаю на кнопку b-dropdown-item-button.

Answer 1

Размещение директивы @click.native.capture.stop на любом подкомпоненте <b-dropdown> не позволит закрыть раскрывающийся список.

Например:

<b-dropdown>
  <b-dropdown-item-button @click.native.capture.stop>
    <span>Mark as read</span>
  <b-dropdown-item-button>

  <b-dropdown-group @click.native.capture.stop>
    // no click will exit the parent, therefore they won't close the dropdown
  </b-dropdown-group>
</bdropdown>

Answer 2

• Во-первых: создайте ссылку, которую вы хотите показывать (например, b-drowpdown)
• , затем создайте функцию onClick, которая будет работать при нажатии кнопки
• наконец остается отображаемым выпадающий список. $ refs.dropdown.show (true), который переопределяет значения по умолчанию

<template>
    <b-dropdown ref="dropdown">
        <b-dropdown-item-button @click="onClick">
            <span>Mark as read</span>
        <b-dropdown-item-button>

        <b-dropdown-group>
    // Messages are output here
        </b-dropdown-group>
    </b-dropdown>
</template>
<script>
  export default {
    methods: {
      onClick() {
        this.$refs.dropdown.show(true)
      }
    }
  }
</script>