Select inside VUE, no dropdown

Topic: Select inside VUE, no dropdown

Łukasz Musznik pro premium asked 10 months ago

Expected behavior Simple demo Select component should open dropdown after click

Actual behavior Nothing happens after click

Resources (screenshots, code snippets etc.)

  • Laravel 8, Vue 2x, no components, Bootstrap 5. Clean test template. App.js import from footer. No console errors. Button "toggle select" not working.
  • Everything works fine only if Select component is outside Vue #app el

    import $ from 'jquery';
    import Vue from 'vue'
    import * as mdb from 'mdb-ui-kit';


    <div class="row d-flex justify-content-center">
    <div class="col-3">
        <select class="select" id="mySelect">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
        <button id="toggleMySelect" class="btn btn-primary" data-mdb-toggle="mySelect">
            Toggle Select

    enter image description here

Mikołaj Smoleński staff commented 10 months ago

In this case you need a Vue Select component which is available in [MDB Vue UI KIT package][]

Keep coding,  Mikołaj from MDB

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.0.0-beta6
  • Device: Pc
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No