Topic: MDBSelect v-model:options update

teicee priority asked 2 years ago

Expected behavior

Init a MDBSelect component and load options by APi query.

Actual behavior

Dynamically update options list not working.

Resources (screenshots, code snippets etc.)

   <MDBSelect v-model:options="optionsRegions" v-model:selected="selectedRegions" multiple label="Région(s)" selectAllLabel="Tous" optionsSelectedLabel="régions selectionnées" />
  import { ref, reactive } from "vue";
  import axios from 'axios';
  import { , MDBSelect } from "mdb-vue-ui-kit";

  export default {
    components: {
    setup() {
      const selectedRegions = ref([]);
      const optionsRegions = reactive([]);

    const loadRegions = () => {
    var options = {
          method: 'GET',
          url: process.env.VUE_APP_BACKEND_URL + '/api/regions',
          params: {},
          headers: {
              "content-type": "application/json",
              "Accept": "application/json"
        axios.request(options).then((response) => {
          //this.regionsData = response
 => {
            optionsRegions.push({ text: region.libelle, value: });
          console.log( optionsRegions );

      return {
    mounted() {

Marcin Luczak staff answered 2 years ago


After internal investigation I can say that Select component works fine. The problem is that Vue watcher for the options property is not triggered by the optionsRegions.push({ text: region.libelle, value: }); syntax.

To make it work you should change optionsRegions to ref:

const optionsRegions = ref([]);

and use folllowing code to update options array

optionsRegions.value = => ({ 
  text: region.libelle, value: 

Keep coding, Marcin

Marcin Luczak staff answered 2 years ago


It seems that there is some kind of reactivity issue with using asynchronous data for the Select component. I've added this topic to our bug list and we will try to fix it as soon as possible.

Keep coding, Marcin

teicee priority answered 2 years ago

Sorry my ticket is not complete, whit this code all options are loaded and shown in select, but when I select an Item I've got the following error :

Uncaught TypeError: Cannot read properties of undefined (reading 'disabled')
    at M (mdb.umd.min.js?d318:31)
    at Proxy.F (mdb.umd.min.js?d318:31)
    at eval (mdb.umd.min.js?d318:31)
    at eval (runtime-dom.esm-bundler.js?830f:1448)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6668)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:6677)
    at HTMLDivElement.invoker (runtime-dom.esm-bundler.js?830f:347)

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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.4.0
  • Device: PC
  • Browser: Firefox
  • OS: Linux
  • Provided sample code: No
  • Provided link: No