Topic: Vue: multiple mdb-select with the same data source
To be able to use the mdb-select component twice on the same page using the same data source. In my case a passed VUE property to the component.
Both controls render fine but when you select an option on one of the controls it sets this option on the other (second) control you have.
To reproduce use the demo sample you have and go to \pro\Forms\SelectPage.vue Use the Colour variations section and copy the mdb-select control and paste it again underneath it so it looks like the following and then build and run the project. When you use the first control and select an option it sets this option on the second control too.
Hi,
I ended using a different control instead. I am not sure if modifying your mutable data is normal or not or if they should be using their own internal data to the component to track the selected value. Rather than add work arounds in i looked at vue-select.org instead which was a simpler solution and i was able to pass the same mutable property to this and not have this problem effect but still have a searchable dropdown.
I personally think this is a bug.
Nick
Mikołaj Smoleński staff commented 4 years ago
Thanks for your opinion. We will consider an update in the future.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.1
- Device: PC
- Browser: Chrome Latest
- OS: Windows 10 Latest
- Provided sample code: No
- Provided link: No
enviaya pro commented 4 years ago
@yourpatrol I faced the same problem. Yes, it's datasource for the component but it's mutable datasource. By another words this source stores selected value. because of vue reactivity system you see this changes for your another select. I tried to use callback to return list as datasource, but I can't select any value from selectbox. I solved this issue by creating a component wrapper for select. By another words you have to create select and initialize the datasource for this select in mounted method. Then you can use new component many times on you page. if you find another solution - tell me please.
Mikołaj Smoleński staff commented 4 years ago
@enviaya thanks for your remarks.
@yourpatrol please let us know if it solved your issue.
Best regards