如何以编程方式打开Vue-Bootstrap的b-dropdown组件

你遇到的这个问题其实很常见——直接操作DOM或者手动修改visible属性，会和Vue-Bootstrap组件内部的状态管理冲突，导致下拉菜单刚打开就被组件自己的逻辑关掉了。别担心，咱们用官方推荐的方式就能搞定：

方案一：用v-model绑定下拉菜单的显示状态 #

这是最稳妥的方式，通过双向绑定让Vue帮你同步组件内部状态：

模板代码 #

<b-form-input v-model="search" @focus="openDropdown"></b-form-input>
<b-dropdown id="ddown1" text="Dropdown Button" class="m-md-2" v-model="isDropdownOpen">
  <b-dropdown-item>First Action</b-dropdown-item>
  <b-dropdown-item>Second Action</b-dropdown-item>
</b-dropdown>

脚本代码 #

export default {
  data() {
    return {
      search: '',
      isDropdownOpen: false
    }
  },
  methods:{
    openDropdown(){
      this.isDropdownOpen = true;
    }
  }
}

这种方式下，下拉菜单的显示状态完全由isDropdownOpen变量控制，组件内部会自动处理所有事件逻辑，不会出现打开后立刻关闭的情况。

方案二：调用组件内置的show()方法 #

Vue-Bootstrap的b-dropdown组件实例提供了官方的show()方法，直接调用它比模拟点击更可靠：

模板代码 #

<b-form-input v-model="search" @focus="openDropdown"></b-form-input>
<b-dropdown id="ddown1" text="Dropdown Button" class="m-md-2" ref="dropdownRef">
  <b-dropdown-item>First Action</b-dropdown-item>
  <b-dropdown-item>Second Action</b-dropdown-item>
</b-dropdown>

脚本代码 #

export default {
  methods:{
    openDropdown(){
      // 调用组件的show方法，触发官方的显示逻辑
      this.$refs.dropdownRef.show();
    }
  }
}

为什么之前的方法不行？ #

你之前尝试的elem.click()或者elem.visible = true，本质上是绕开了组件的内部状态管理。Vue-Bootstrap的下拉菜单会在内部监听点击、失焦等事件，当你手动修改状态后，组件可能在后续的事件循环中重置状态，导致下拉菜单瞬间关闭。而官方的v-model绑定和show()方法，都是和组件内部逻辑同步的，不会出现这种冲突。

内容的提问来源于stack exchange，提问作者thar