Can't select item in b-dropdown vuejs - vue.js

Question

Hy I'm creating a simple dropdown using bootstrap-vue in vuejs. The Code in my component is like this :
<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: ''
}
}
The problem is I can't select any item from dropdown item. Is there something that I missed here ?
Thanks in advance
Reference :
https://bootstrap-vue.js.org/docs/components/dropdown

Answer 1

This is a dropdown for navigation, not a select elem for forms. It does not support v-model and does not act like a form input.
You could use select instead, or if you still want to use dropdown as a form select, you could add click handler to control it.
For e.g.
<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

I don't think a b-dropdown does what you think it does.
Bootstrap dropdowns are like menus. They don't have v-models.
What you seem to be needing is a Form Select instead:
<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: ''
}
}