dropdown options are not selecting properly in vuejs

Question

I have a dropdown in which options are populated based on API Response. The response looks like below

{"value":"1371","label":"apple"},{"value":"1371","label":"banana"},{"value":"1371","label":"mango "},{"value":"1365","label":"airconditioner"},{"value":"1365","label":"refridgerator"},{"value":"1365","label":"mobile"}

Due to the response having same value for different label, when selecting the options there is a glitch. when I select "mango", it automatically goes and select first field which has the same value. Is there any solution in vuejs to fix this.

<select v-model="selected" class="selected-lists" size="8">
 <option v-for="facility in availableList" v-bind:value="facility.value">{{facility.label }}</option>
 </select>

Answer 1

Since a few of your items has the same value, the first item in the list will be selected.

What you can do is set the entire object as value: :value="facility"

And then, if you need only the value of the selected item, get it from the selected property, which is your model: In template: {{ selected.value }}, in script: this.selected.value

Answer 2

Three of your items has the same value 1371.

It will always select the first item in the list with the selected value.

Values should be unique.