auto select first option in v-for vue js auto select first option in v-for vue js vue.js vue.js

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>