不能 select b-dropdown vuejs 中的项目
Can't select item in b-dropdown vuejs
我在 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: ''
}
}
问题是我无法 select 下拉项目中的任何项目。我在这里错过了什么吗?
提前致谢
我认为 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: ''
}
}
这是用于导航的下拉菜单,而不是用于表单的 select
元素。它不支持 v-model 并且不像表单输入。
您可以改用 select,或者如果您仍想将下拉列表用作表单 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>
我在 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: ''
}
}
问题是我无法 select 下拉项目中的任何项目。我在这里错过了什么吗? 提前致谢
我认为 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: ''
}
}
这是用于导航的下拉菜单,而不是用于表单的 select
元素。它不支持 v-model 并且不像表单输入。
您可以改用 select,或者如果您仍想将下拉列表用作表单 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>