Question

Hy我在vuejs中使用bootstrap-vue创建一个简单的下拉列表。我的组件中的代码是这样的：

<b-col sm="2">
   <b-dropdown :text="selectedItem" v-model="selectedItem">
       <b-dropdown-item>Action</b-dropdown-item>
       <b-dropdown-item>Another action</b-dropdown-item>
       <b-dropdown-item>Something else here</b-dropdown-item>
   </b-dropdown>
   {{selectedItem}}
</b-col>
...
...
...
data () {
 return {
   selectedItem: ''
 }
}

问题是我无法从下拉列表中选择任何项目。我在这里错过了什么吗？提前致谢

参考： https://bootstrap-vue.js.org/docs/components/dropdown

Answer 1

这是导航的下拉列表，而不是表单的select元素。它不支持v-model，也不像表单输入。

您可以使用select，或者如果您仍想使用下拉菜单作为表单选择，则可以添加点击处理程序来控制它。

例如

<b-dropdown :text="selectedItem">
        <b-dropdown-item @click="selectedItem='Action'">Action</b-dropdown-item>
        <b-dropdown-item @click="selectedItem='Another action'">Another action</b-dropdown-item>
        <b-dropdown-item @click="selectedItem='Something else here'">Something else here</b-dropdown-item>
</b-dropdown>

https://codesandbox.io/s/zky4j0zx94

Answer 2

我认为b-dropdown不会做你认为它做的事情。

Bootstrap下拉菜单就像菜单一样。他们没有v-models。

您似乎需要的是Form Select而不是：

<b-col sm="2">
    <b-form-select v-model="selectedItem">
        <option value="Action">Action</option>
        <option value="Another action">Another action</option>
        <option value="Something else here">Something else here</option>
    </b-form-select>
    <div>selectedItem: <strong>{{ selectedItem }}</strong></div>
</b-col>
...
...
...
data () {
 return {
   selectedItem: ''
 }
}

无法在b-dropdown vuejs中选择项目

2 个答案: