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>
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.