optionValue and dataKey combination is broken is Select Components

[fairking]

I am trying to bind a single value but looks like it is not working. Could you please look if I my code is correct.
My example:

export class DropdownItem {
    id: string;
    name: string;
}
data() {
    return {
        selectedItemId: String,
        dropdownList: DropdownItem[],
    };
},
<Dropdown v-model="selectedItemId" :options="dropdownList" option-value="id" option-label="name" placeholder="Select an Item" />

P.S. It would be nice to have some sandbox like https://jsfiddle.net/ so you can check the example.

[fairking]

Looks like it is working. Closing the issue. Will figure out on my side what is wrong. Sorry for the perturbation.
This is my working jsfiddle https://jsfiddle.net/FairKing/esLawbdq/1/

[fairking]

Dropdown stops working with the following configuration:

<Dropdown v-model="dropdownCity"
    :options="dropdownCities"
    option-label="name"
    option-value="code"
    data-key="code"
    placeholder="Select a City" />

The issue is "data-key" property. If I remove it everything is working fine.

[cagataycivici]

Could you please share your code that reproduces the issue?

[fairking]

The issue happens when both attributes are applied: option-value and data-key.

[cagataycivici]

Could you please share sample code that reproduces the issue?

[fairking]

https://jsfiddle.net/FairKing/esLawbdq/17/

[cagataycivici]

Also affects multiselect, listbox and selectbutton.