Vue.js/Vuetify - 在 v-select 中预加载选项时的自动完成问题

Question

我正在使用 v-model 设置 v-select 的选定选项，因此当我打开屏幕时它已经带有结果。在我在 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' 是另一种选择。