MDBSelect v-model:options update


Topic: MDBSelect v-model:options update

teicee pro premium priority asked 3 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.)

<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 3 years 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


teicee pro premium priority answered 3 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)

Marcin Luczak staff answered 3 years 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


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