Topic: Using an MDB Vue Select Control
I can't find any documentation on how to two-way bind an MDB Vue Select control with a component's data. Could someone please point me to the documentation or create a bug report to develop it.
Normally a select control will have a property such as "items" for binding the select's contents, and use the v-model property for binding the select's selected value or array of selected values to the model. MDB appear to have steered away from this convention and is using v-model to bind to the select's contents, but I can't find any property for two way-binding the selected value(s) to the model.
I am using the getValue event to update the model if the select list changes, but unfortunately I have had to use a watch method to update the Select control if the model changes... which I shouldn't have to do for a commercially purchased control.
The only way I could fully get a Select to work is to iterate through the content list and set "selected:true" on the selected value... I really hope I'm misunderstanding the control as this is just silly. With this implementation if I have a form with two country selects (e.g. for physical address and postal address) on it I can't use the same list for both selects as the selected value is stored in the source list. What's more I have to iterate through hundreds of values to find the country that needs to be selected.
I really hope I don't understand this control properly. Could you please point me to the documentation, and if I do understand this control could you please consider redesigning it so that it is more efficient and usable.
Thank you.
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: 5.8.3
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Magdalena Dembna staff premium commented 5 years ago
The described behaviour is right - selected values and options are taken from one array. Following your case, I can understand how it might be irritating. You can have one list with countries stored in your data object and then map through them to create two separate lists. We are currently in the process of rewriting select component - the new version will be out really soon as it's the top priority for us to make it work better. You couldn't have better timing - we will certainly take your feedback under consideration. Kind regards, Magdalena
phopkins@atomsoftware.com.au commented 5 years ago
Excellent. Thank you Magdalena.
Could you please also ensure that the control allows for the "bg" style that input groups current support. Otherwise Selects have a different style to other input controls.
Thank you.
Magdalena Dembna staff premium commented 5 years ago
We will consider it as well. Kind regards, Magdalena
phopkins@atomsoftware.com.au commented 5 years ago
Hi, when do you expect the above binding and styling issues to be fixed with the Vue Select control please?
Magdalena Dembna staff premium commented 5 years ago
We have discussed changing the data structure, but as it would require to rewrite the entire component from scratch and force our users to update their code, we decided that it's too big of the step for now. As for styling issues, we are currently in the middle of updating our form elements - but it's not possible to say when those changes will be added - the list is quite long. Kind regards, Magdalena
phopkins@atomsoftware.com.au commented 5 years ago
Ok. I won't be able to use it then :-(
Thank you.