[Vuejs]-Vuejs select box have item selected on load

by

2👍

You can set your selectedDisplay value to displays[0] or however you’d like, so when the select tag is loaded it’s default value is set to that, like this:

var app = new Vue({
  el: '#app',
  data: {
    selectedDisplay: null,
    displays: [
      'Vue',
      'React',
      'Angular',
      'Aurelia',
      'Knockout'
    ]
  },
  beforeMount: function () {
    this.selectedDisplay = this.displays[0]
  }
});
<div id="app">

  <select v-model="selectedDisplay">
  
    <option v-for="display in displays" :value="display">{{ display }}</option>
  
  </select>

  <h1>{{ selectedDisplay }}</h1>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
👤Reşit Körsu

Leave a comment