Topic: Select component bug when set selected element using code.
Hi. I found bug in new version MDB (VUE) for Select component. I have tried to set selected element for Select component and I couldn't. But it worked before version 6.
The code I am trying to set:
this.$set(this.timeZone[0], 'selected', true);
As a result I see the placeholder was raised to the top like user chose something but there is no text in Select.
I made code inspection in browser and figured out that the value in the Input element doesn't exist if I try to set selected option via code. But if I try to set selected
timeZone: [
{
value: "Etc/GMT+12",
text: "(UTC-12:00) International Date Line West",
selected: true
},
element in data source - the value for Input exists.
How can I resolve this issue until you fix it?
Hi there,
Because Vue 2 is not recognizing all data changes the trick is to use sort method. Here's an example of select update in basicOptions array:
selectOption(key) {
this.basicOptions.forEach(option => {
option.selected = false;
});
this.$set(this.basicOptions[key], 'selected', true);
this.basicOptions.sort();
}
You can find live demo here: https://vue.mdbootstrap.com/#/forms/pro/select
Please keep in mind that you have to mark all options as false first in single option select.
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.0.1
- Device: Laptop
- Browser: Chrome
- OS: Mac OS
- Provided sample code: No
- Provided link: No
enviaya pro commented 5 years ago
Hi. Could you please help to resolve this issue? It's critical for production application. Thanks.