Topic: MDBSelect requires mutable options to function
jammerxd2 priority asked 10 months ago
Expected behavior
I should be able to create multiple Selects from the same array of options without having to create multiple copies of the array and have each select work independently - even when using the same code.
Actual behavior
I have to run extra code to create multiple copies of the options array for the MDBSelect component to function correctly when building forms that use a select in a v-for loop and all share the same options array.
Resources (screenshots, code snippets etc.)
This is horribly inefficient. Additionally, looking at the MDBSelect.vue component, I don't see any time where 'update:options' is emitted. So this requirement can go away entirely.
Please remove 'update:options' from the emits section of the component.
I don't currently have a snippet to share beyond the following:
<div v-for="item in items" v-bind:key="item.id">
<div class="input-group">
<MDBSelect :label="`${item.name} Assignment`" :options="selectOptions" :selected="getSelectedValueForItem(item.id)" @update:selected="(x:number)=>changeSelectionForItem(item.id,x)" />
</div>
</div>
<!--
this.selectOptions is a prop defined via props: ['selectOptions']
getSelectedValueForItem is a function of the component:
getSelectedValueForItem(x:number)
{
let selectedOptionId = -1;
const results = this.editItem.mappings.filter((y:MappedItem)=>y.itemId === x);
if(results.length > 0) selectedOptionId = results[0].optionId;
return selectedOptionId;
}
changeSelectionForItem is a function of the component:
changeSelectionForItem(itemId:number,newSelection:number)
{
if(newSelection < 0)
{
this.editItem.mappings = this.editItem.mappings.filter((y:MappedItem)=>y.itemId === itemId);
}
else
{
const results = this.editItem.mappings.filter((y:MappedItem)=>y.itemId === itemId);
if(results.length > 0)
{
this.editItem.mappings = this.editItem.mappings.map((y:MappedItem)=>{
if(y.itemId === itemId) y.optionId = newSelection;
return y;
})
}
else
{
this.editItem.mappings.push({
itemId: itemId,
optionId: newSelection
})
}
}
this.$emit('update:editItem',this.editItem);
}
-->
Mateusz Trochonowicz staff answered 10 months ago
Hi, thank you for reporting this problem! We are going to add this to our "to do" list for next release and deep dive and check out how we can improve of this.
Keep coding!
jammerxd2 priority commented 10 months ago
Any idea when this will be?
Bartosz Cylwik staff commented 10 months ago
Unfortunately, we cannot give an exact date for that but the new version is going to be released Q1 2024.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 4.1.1
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No