vue.js - vue-select 设置默认值

Question

我需要使数组选项的第一个元素成为默认选项，像这样

但我明白了：

我的组件代码：

<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')
                    },
                ],
            }
        },
    }

Answer 1

使用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;
}

请注意，您仍然需要声明selectedLangin data，因为无论是空字符串，null因此 Vue 都会为其添加反应性。