Vue.js/Vuetify - Autocomplete issue when pre-loading option in a v-select

Question

I'm setting the selected option of a v-select using v-model, so when I open the screen it already comes with the result. That's working fine until I set autocomplete property in v-select tag. When I do that the option is chosen but the select doesn't show it. Is there any issue with the autocomplete feature or it's the standard behavior for the component?

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/[email protected]/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>

Here it is jsfiddle link: https://jsfiddle.net/vcmiranda/huj9L4bq/ Thanks.

Answer 1

I test your code, vuetify will inject its classes after yours, after delete this line in v-select, it works.

class="input-group--focused"

Alternatively, using 'id' instead of 'class' is another option.