Vue-select set default value

Use v-model on the <v-select> and set it to whatever you want selected.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [{
        text: 'RU',
        value: 'ru'
      },
      {
        text: 'EN',
        value: 'en'
      }
    ],
    selectedLang: 'ru'
  })
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app" data-app>
  <v-container>
    <v-select :items="items" v-model="selectedLang" />
  </v-container>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>


If your options are dynamic and you don’t know which one will be first, in mounted, just select the first one:

mounted() {
  this.selectedLang = this.items[0].value;
}

Note you still need to declare selectedLang in data, as either empty string on null so Vue adds reactivity to it.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top