Не удается выбрать элемент в раскрывающемся списке vuejs

Hy Я создаю простой раскрывающийся список, используя bootstrap-vue в vuejs. Код в моем компоненте выглядит так:

<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 < / а>


vue.js bootstrap-vue
person Maryadi Poipo    schedule 28.03.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я не думаю, что b-dropdown делает то, что вы думаете.

Выпадающие меню Bootstrap похожи на меню. У них нет v-models.

Кажется, вам нужна Выбор формы < / a> вместо этого:

<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: ''
 }
}
person acdcjunior    schedule 28.03.2018
comment
Хорошо ... Большое спасибо за ваше объяснение, мистер acdjunior. Поэтому я пропустил v-модель в b-dropdrown, которая недоступна - person Maryadi Poipo; 28.03.2018
comment
Да, это не так. Это потому, что это не цель раскрывающегося списка. Я думаю, что выбор формы отлично справляется с этой задачей. - person acdcjunior; 28.03.2018

arrow_upward
5
arrow_downward

Это раскрывающийся список для навигации, а не элемент select для форм. Он не поддерживает v-модель и не действует как ввод формы.

Вместо этого вы можете использовать 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

person Jacob Goh    schedule 28.03.2018
comment
Ok. Спасибо за это - person Maryadi Poipo; 28.03.2018
comment
Работает нормально с выпадающим списком b - person Masum Billah; 06.05.2019