auto select first option in v-for vue js

<select class="form-control" v-model="compare_version" > <option v-for="(version, index) in allVersions" v-bind:value="index" v-bind:key="version.versionid" :selected="version.versionid === 0" >{{ version.versionid }}</option> </select>

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>

Recommended topics

Hot tags