Topic: MDBSelect v-model:options update
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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