Vue.js中Bootstrap-Vue的b-dropdown无法选中项问题

嘿，我帮你排查了下代码问题——你搞混了Bootstrap-Vue里<b-dropdown>的v-model作用啦！

<b-dropdown>的v-model其实是用来控制下拉菜单展开/收起状态的，不是绑定选中的选项值。要实现选中选项后更新selectedItem，你需要这么修改：

修改后的组件代码 #

模板部分 #

<b-col sm="2">
  <!-- 用@change监听选中事件，替换原来的v-model -->
  <b-dropdown :text="selectedItem || '请选择'" @change="selectedItem = $event">
    <!-- 给每个下拉选项加上value属性 -->
    <b-dropdown-item value="Action">Action</b-dropdown-item>
    <b-dropdown-item value="Another action">Another action</b-dropdown-item>
    <b-dropdown-item value="Something else here">Something else here</b-dropdown-item>
  </b-dropdown>
  {{ selectedItem }}
</b-col>

Data部分（保持不变） #

data () {
  return {
    selectedItem: ''
  }
}

关键修改点说明 #

• 给每个<b-dropdown-item>添加value属性：选中选项时，@change事件会把这个value作为参数传递出来
• 用@change事件更新selectedItem：替代原来错误绑定的v-model，因为<b-dropdown>的v-model只负责菜单的显示/隐藏
• 优化默认文本：selectedItem || '请选择'让初始状态有友好的提示，而不是空文本

额外建议：如果是表单场景，推荐用<b-form-select> #

如果你需要的是表单式的下拉选择器（而非导航类下拉菜单），Bootstrap-Vue的<b-form-select>更适合，代码更简洁：

<b-col sm="2">
  <b-form-select 
    v-model="selectedItem" 
    :options="[
      { text: 'Action', value: 'Action' },
      { text: 'Another action', value: 'Another action' },
      { text: 'Something else here', value: 'Something else here' }
    ]"
  ></b-form-select>
  {{ selectedItem }}
</b-col>

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