MDBSelect requires mutable options to function


Topic: MDBSelect requires mutable options to function

jammerxd2 pro premium priority asked 4 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 pro premium priority answered 4 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 pro premium priority commented 4 months ago

Any idea when this will be?


Bartosz Cylwik staff commented 4 months ago

Unfortunately, we cannot give an exact date for that but the new version is going to be released Q1 2024.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No