auto select first option in v-for vue js
You can define the default value as 0 for compare_version
in data()
since you are binding the index from the iterating list as the value to be captured in the model. v-model
will take care of that.
And remove that :selected
binding. Taking a note that here captured value from select will be the index of the list.
var vm = new Vue({ el: "#vue-instance", data: { compare_version: 0, allVersions: [ {versionId: 'A'}, {versionId: 'B'}, {versionId: 'C'} ] }})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <!DOCTYPE html><html><body><div id="vue-instance"><select v-model="compare_version"> <option v-for="(x,index) in allVersions" v-bind:value="index" v-bind:key="x.text">{{x.versionId}}</option> </select> <span>Selected: {{ compare_version }}</span></div></body></html>