Vue-select set default value

Question

i need to make the first element of array Options the default option, like this

But i get this:

My component code:

<v-select :options="options" label="title" class="select">
         <template slot="option" slot-scope="option">
             <span :class="option.icon"></span>
             <img class="language-flag" :src="option.img" /> {{ option.title }}
         </template>
         <template slot="selected-option" slot-scope="option">
             <span :class="option.icon"></span>
             <img class="language-flag" :src="option.img" /> {{ option.title }}
         </template>
</v-select>

Script:

  export default {
        data() {
            return {
                options: [{
                        title: 'RU',
                        img: require('../../assets/icons/flags/RU.svg'),
                    },
                    {
                        title: 'KZ',
                        img: require('../../assets/icons/flags/KZ.svg')
                    },
                ],
            }
        },
    }

tao · Accepted Answer · 2020-11-01 21:38:04Z

6

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.

edited Nov 1, 2020 at 21:38

answered Nov 1, 2020 at 21:16

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

10k20 Over a year ago

Thank you! This is the best decision for dynamic data.

Collectives™ on Stack Overflow

Vue-select set default value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related