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.