Topic: MDBSelect v-model:options update

teicee priority asked 11 months 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.)

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

  export default {
    components: {
      MDBSelect,
    },
    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
          response.data.forEach(region => {
            optionsRegions.push({ text: region.libelle, value: region.id });
          });
          console.log( optionsRegions );
        })
      };

      return {
        optionsRegions,
        selectedRegions,
        loadRegions,
      };
    },
    mounted() {
      this.loadRegions()
    }
  };
</script>

Marcin Luczak staff answered 11 months ago


Hi,

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: region.id }); syntax.

To make it work you should change optionsRegions to ref:

const optionsRegions = ref([]);

and use folllowing code to update options array

optionsRegions.value = response.map(region => ({ 
  text: region.libelle, value: region.id 
});

Keep coding, Marcin


Marcin Luczak staff answered 11 months ago


Hi,

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 11 months 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: 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