Topic: mdb-select duplicate value console warning
Hi there, I have mdb-select component with the following options:
[{ "disabled": true, "text": "Please select an option", "value": null }, { "text": "Batch ID 460111 at time 03/07/19 15:16:38 from ccy.xlsx", "value": 460111 }, { "text": "Batch ID 460110 at time 03/07/19 13:20:27 from depo_SIMPLE.xlsx", "value": 460110 }, { "text": "Batch ID 460109 at time 03/07/19 13:19:44 from ccy.xlsx", "selected": true, "value": 460109 }, { "text": "Batch ID 460108 at time 03/07/19 13:10:21 from depo.xlsx", "value": 460108 }, { "text": "Batch ID 460107 at time 03/07/19 12:44:44 from ccy.xlsx", "value": 460107 }, { "text": "Batch ID 460106 at time 03/07/19 11:26:25 from ccy.xlsx", "value": 460106 }, { "text": "Batch ID 460105 at time 03/07/19 11:19:16 from depo.xlsx", "value": 460105 }, { "text": "Batch ID 460104 at time 03/07/19 10:55:40 from depo.xlsx", "value": 460104 }, { "text": "Batch ID 460103 at time 03/07/19 10:04:09 from depo.xlsx", "value": 460103 }, { "text": "Batch ID 460102 at time 03/07/19 09:58:49 from depo.xlsx", "value": 460102 }, { "text": "Batch ID 460101 at time 03/07/19 09:58:22 from depo.xlsx", "value": 460101 }, { "text": "Batch ID 460100 at time 03/07/19 09:46:09 from depo.xlsx", "value": 460100 }, { "text": "Batch ID 460094 at time 03/06/19 16:47:31 from depo.xlsx", "value": 460094 }, { "text": "Batch ID 460094 at time 03/06/19 16:47:32 from depo.xlsx", "value": 460094 }, { "text": "Batch ID 460093 at time 03/06/19 16:47:01 from ccy.xlsx", "value": 460093 }]
when I try to use the select in UI, I'm getting these warnings in console (when the options are being populated):
[Vue warn]: Duplicate keys detected: '459854'. This may cause an update error.
found in
---> at node_modules/mdbvue/src/components/pro/Select.vue at node_modules/mdbvue/src/components/Col.vue at node_modules/mdbvue/src/components/Row.vue at node_modules/mdbvue/src/components/Col.vue at node_modules/mdbvue/src/components/Row.vue at node_modules/mdbvue/src/components/Col.vue at node_modules/mdbvue/src/components/Row.vue at node_modules/mdbvue/src/components/Col.vue at node_modules/mdbvue/src/components/Row.vue at src/App.vue
Any tip what can be wrong? The options are received from backend and other selections works fine, but this one is populating the warnings.
Thanks, Petr
Hi there Petr,
The problem here was that the select options keys are in fact option.value object property, and indeed there is a duplicate of 460094 value among options. It can sometimes be a case, though, so the issue should be considered a bug. It has been fixed for select to regard its v-for'ed options with index instead as their keys. The change shall be included in the upcoming release within ten days.
Huge thanks for pointing that out!
Best, Kuba
Petr Urban pro premium priority commented 6 years ago
Hi Kuba, thanks for your support!
The value you found: 460094 is in the options really duplicate, but Vue was reporting duplicate for all of the option.value values. That was what I found the issue.
But anyway, thanks again ;)
Best, Petr
Jakub Strebeyko staff commented 6 years ago
That's interesting, hm! Well, hopefully this should not be the case anymore starting from the next update, as we made Vue in charge of indexing and "keying" our options. Let me know in case of further questions, waiting for feedback for the update (should be out within a week)! :)
Best, Kuba
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: 5.1.1
- Device: MacBook
- Browser: Safari
- OS: Mac OS
- Provided sample code: No
- Provided link: No