Vue.js/Vuetify - проблема автозаполнения при предварительной загрузке в v-select

Question

Я устанавливаю выбранную опцию v-select, используя v-модель, поэтому, когда я открываю экран, он уже дает результат. Это работает нормально, пока я не установлю свойство автозаполнения в теге v-select. Когда я это делаю, опция выбирается, но она не отображается. Есть ли проблема с функцией автозаполнения или это стандартное поведение для компонента?

Vue.use(Vuetify);

var app = new Vue({
  el: '#app',
  data() {
    return {
    selected: 2,
        country: [{
          text: 'USA',
          value: 1
        }, {
          text: 'Canada',
          value: 2
        }, {
          text: 'England',
          value: 3
        }, {
          text: 'France',
          value: 4
        }]
      }
    }
})

<script src="https://unpkg.com/vue@2.4.1/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-card class="grey lighten-4 elevation-0">
      <v-card-text>
        <v-container fluid>
          <v-layout row wrap>
            <v-flex xs4>
              <v-flex>
                <v-subheader>Origin Country</v-subheader>
              </v-flex>
              <v-flex>
                <v-select
                  :items="country"
                  v-model="selected"
                  label="Select"
                  class="input-group--focused"
                  single-line
                  bottom
                  autocomplete>
                </v-select>
              </v-flex>
            </v-flex>
            <v-flex>
              Selected: {{ selected }}
            </v-flex>
          </v-layout>
        </v-container>
      </v-card-text>
    </v-card>
  </v-app>
</div>

Вот ссылка на jsfiddle: https://jsfiddle.net/vcmiranda/huj9L4bq/ Спасибо.

Answer 1

Я проверяю ваш код, vuetify будет вставлять его классы после вашего, после удаления этой строки в v-select, он работает.

class="input-group--focused"

В качестве альтернативы, использование "id" вместо "class" является еще одним вариантом.