Vue选择设置默认值

问题描述

我需要将数组选项的第一个元素设为默认选项，例如

但是我明白了：

我的组件代码：

<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>

脚本：

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

解决方法

在v-model上使用<v-select>并将其设置为您想要选择的任何内容。

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vuetify@2.x/dist/vuetify.js"></script>

---

如果您的选项是动态的，并且您不知道哪个是第一个，请在mounted中选择第一个：

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

请注意，您仍然需要在selectedLang中声明data，作为null上的任何一个空字符串，以便Vue为其添加响应性。